adds loading styles to the listing

opentech/static_src/src/app/src/components/Listing/index.js

@@ -41,16 +41,25 @@ export default class Listing extends React.Component {
         const { isLoading, error, items, onItemSelection, activeItem } = this.props;
 
         if (isLoading) {
-            return <p>Loading...</p>;
+            return (
+                <div className="listing__list is-loading">
+                    <h5 className="listing__loading-header">Loading...</h5>
+                    <div className="listing__loader" />
+                </div>
+            )
         } else if (error) {
             return (
-                <>
+                <div className="listing__list is-loading">
                     <p>Something went wrong. Please try again later.</p>
                     <p>{ error }</p>
-                </>
-            );
+                </div>
+            )
         } else if (items.length === 0) {
-            return <p>No results found.</p>;
+            return (
+                <div className="listing__list is-loading">
+                    <p>No results found.</p>
+                </div>
+            )
         }
 
         return (

opentech/static_src/src/app/src/components/Listing/style.scss

@@ -23,6 +23,14 @@ $listing-header-height: 75px;
             // allow for vertical scrolling on laptops
             height: calc(100vh -  #{$listing-header-height});
         }
+
+        &.is-loading {
+            border-right: 2px solid $color--light-mid-grey;
+
+            p {
+                margin: 20px 0 20px 20px;
+            }
+        }
     }
 
     // inner <li>'s
@@ -86,4 +94,13 @@ $listing-header-height: 75px;
         border-radius: 5px;
         font-size: 14px;
     }
+
+    &__loading-header {
+        text-align: center;
+        margin-top: 30px;
+    }
+
+    &__loader {
+        @include loading-icon;
+    }
 }

opentech/static_src/src/sass/apply/abstracts/_mixins.scss

@@ -155,13 +155,53 @@
     }
   }
 
+// used for the submission list items in the react app
 @mixin submission-list-item {
     border-bottom: 2px solid $color--light-mid-grey;
     border-right: 2px solid $color--light-mid-grey;
 }
 
+// ie11-specific css
 @mixin target-ie11 {
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
         @content;
     }
 }
+
+// loading icon
+@mixin loading-icon($speed: .4s) {
+    font-size: 10px;
+    margin: 30px auto;
+    text-indent: -9999em;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(to right, $color--dark-grey 10%, transparent 42%);
+    position: relative;
+    animation: spin $speed infinite linear;
+    transform: translateZ(0);
+
+    &::after {
+        background: $color--light-grey;
+        width: 75%;
+        height: 75%;
+        border-radius: 50%;
+        content: '';
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}