Show spinner before loading library content

src/components/library/library.css

@@ -12,6 +12,7 @@
     overflow-y: auto;
     height: auto;
     padding: 0.5rem;
+    height: calc(100% - $library-header-height);
 }
 
 .library-scroll-grid.withFilterBar {
@@ -59,3 +60,11 @@
     height: $library-filter-bar-height;
     overflow: hidden;
 }
+
+.spinner-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/library/library.jsx

@@ -9,6 +9,7 @@ import Modal from '../../containers/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
+import Spinner from '../spinner/spinner.jsx';
 
 import styles from './library.css';
 
@@ -44,9 +45,16 @@ class LibraryComponent extends React.Component {
         this.state = {
             selectedItem: null,
             filterQuery: '',
-            selectedTag: ALL_TAG.tag
+            selectedTag: ALL_TAG.tag,
+            loaded: false
         };
     }
+    componentDidMount () {
+        // Allow the spinner to display before loading the content
+        setTimeout(() => {
+            this.setState({loaded: true});
+        });
+    }
     componentDidUpdate (prevProps, prevState) {
         if (prevState.filterQuery !== this.state.filterQuery ||
             prevState.selectedTag !== this.state.selectedTag) {
@@ -162,7 +170,7 @@ class LibraryComponent extends React.Component {
                     })}
                     ref={this.setFilteredDataRef}
                 >
-                    {this.getFilteredData().map((dataItem, index) => (
+                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
                         <LibraryItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
@@ -183,7 +191,14 @@ class LibraryComponent extends React.Component {
                             onMouseLeave={this.handleMouseLeave}
                             onSelect={this.handleSelect}
                         />
-                    ))}
+                    )) : (
+                        <div className={styles.spinnerWrapper}>
+                            <Spinner
+                                large
+                                level="primary"
+                            />
+                        </div>
+                    )}
                 </div>
             </Modal>
         );

src/components/spinner/spinner.css

@@ -39,6 +39,16 @@
     height: .5rem;
 }
 
+.large {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+.large::before, .large::after {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -71,3 +81,10 @@
 .spinner.info::after {
     border-top-color: $ui-white;
 }
+
+.spinner.primary {
+    border-color: $motion-transparent;
+}
+.spinner.primary::after {
+    border-top-color: $motion-primary;
+}

src/components/spinner/spinner.jsx

@@ -8,7 +8,8 @@ const SpinnerComponent = function (props) {
     const {
         className,
         level,
-        small
+        small,
+        large
     } = props;
     return (
         <div
@@ -16,7 +17,10 @@ const SpinnerComponent = function (props) {
                 className,
                 styles.spinner,
                 styles[level],
-                {[styles.small]: small}
+                {
+                    [styles.small]: small,
+                    [styles.large]: large
+                }
             )}
         />
     );
@@ -24,10 +28,13 @@ const SpinnerComponent = function (props) {
 SpinnerComponent.propTypes = {
     className: PropTypes.string,
     level: PropTypes.string,
-    small: PropTypes.bool
+    small: PropTypes.bool,
+    large: PropTypes.bool
 };
 SpinnerComponent.defaultProps = {
     className: '',
-    level: 'info'
+    level: 'info',
+    small: false,
+    large: false
 };
 export default SpinnerComponent;