WIP Sync contributions

app/styles/_sugar.scss

@@ -0,0 +1,17 @@
+@mixin loading-border-top {
+  &::before {
+    display: block;
+    width: 100%;
+    height: 1px;
+    content: '';
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 40%, #68d7fb 60%, rgba(255, 255, 255, 0.2));
+    background-size: 200% 200%;
+    animation: kitt 2.5s linear infinite;
+  }
+}
+
+@keyframes kitt {
+  0%{ background-position: 0% 0%}
+  50%{ background-position: 100% 0%}
+  100%{ background-position: 0% 0%}
+}

app/styles/app.scss

@@ -88,6 +88,7 @@ section {
 
 @import "buttons";
 @import "forms";
+@import "sugar";
 
 @import "components/contribution-list";
 @import "components/contribution-details";

app/styles/components/_contribution-list.scss

@@ -114,4 +114,13 @@ ul.contribution-list {
     }
   }
 
+  &.loading {
+    @include loading-border-top;
+
+    li {
+      &:first-of-type {
+        border-top: none;
+      }
+    }
+  }
 }

app/styles/components/_contributor-list.scss

@@ -1,4 +1,5 @@
 table.contributor-list {
+  position: relative;
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1.5rem;
@@ -48,4 +49,11 @@ table.contributor-list {
       }
     }
   }
+
+  &.loading {
+    @include loading-border-top;
+    &::before {
+      position: absolute;
+    }
+  }
 }