Show loading spinner when crud lists are loading

src/containers/CrudList/style.scss

@@ -1,4 +1,5 @@
 @import '~variables';
+@import '~mixins';
 
 .crud-list-wrapper {
     display: flex;
@@ -17,6 +18,14 @@
     }
 
     &.loading {
+        .head {
+            .meta {
+                .loading-indicator {
+                    opacity: 1;
+                }
+            }
+        }
+
         .body {
             opacity: $opacity-pending;
         }
@@ -26,6 +35,22 @@
         .title {
             margin: 0;
         }
+
+        .meta {
+            display: flex;
+            margin-top: 0.3em;
+            padding-top: 0.3em;
+            border-top: 1px solid $color-grey-light;
+            justify-content: space-between;
+            align-items: center;
+
+            .loading-indicator {
+                @include loading-spinner(20px, black, 1/8);
+                display: block;
+                opacity: 0;
+                transition: opacity 0.3s ease;
+            }
+        }
     }
 
     .body {

src/sass/mixins.scss

@@ -0,0 +1,31 @@
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@mixin loading-spinner($size: 10px, $color: white, $ratio: 0.1) {
+    $border-size: $size * $ratio;
+
+    font-size: 10px;
+    position: relative;
+    text-indent: -9999px;
+    border-top: $border-size solid rgba($color, 0.2);
+    border-right: $border-size solid rgba($color, 0.2);
+    border-bottom: $border-size solid rgba($color, 0.2);
+    border-left: $border-size solid $color;
+    transform: translateZ(0);
+    animation: spinner 1.1s infinite linear;
+    overflow: hidden;
+
+    &, &::after {
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+    }
+}
+
+

webpack.config.js

@@ -163,6 +163,7 @@ module.exports = {
             sagas: path.resolve(__dirname, 'src/sagas'),
             selectors: path.resolve(__dirname, 'src/selectors'),
             variables: path.resolve(__dirname, 'src/sass/variables.scss'),
+            mixins: path.resolve(__dirname, 'src/sass/mixins.scss'),
             sprite: path.resolve(__dirname, 'src/images/sprite/sprite.scss')
         }
     },