spinner added to dynamic imports

components/layout/component.js

@@ -2,6 +2,9 @@ import React from 'react';
 import HeaderMobile from './header/mobile';
 import HeaderDesktop from './header/desktop';
 import dynamic from 'next/dynamic';
+
+import Spinner from 'components/spinner';
+
 import Content from './content';
 import Footer from './footer';
 
@@ -11,7 +14,9 @@ const Layout = ({ story, onClose, isMobile, isStatic }) => {
   if (!story) return null;
 
   const id = CATEGORIES[story.category].index[story.index]
-  const DynamicComponent = dynamic(() => import(`components/layout/static-pages/${id}`));
+  const DynamicComponent = dynamic(
+    () => import(`components/layout/static-pages/${id}`),
+    { loading: () => <Spinner index={story.category} /> });
 
   return (
     <div className={`l-layout block${story.category}`}>

components/spinner/component.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+const Spinner = ({ index }) => (
+  <div
+    className={cx("c-spinner", 
+        { [`theme${index}`]: index + 1 > 0 }
+    )}
+  />
+);
+
+
+Spinner.propTypes = {
+  color: PropTypes.number.isRequired
+};
+
+export default Spinner;

components/spinner/index.js

@@ -0,0 +1 @@
+export { default } from './component';

components/spinner/styles.scss

@@ -0,0 +1,33 @@
+@import 'styles/settings';
+
+.c-spinner {
+  position: relative;
+  margin: auto;
+  border: 8px solid rgba(85, 206, 200, 0.1);
+  opacity: 0.4;
+  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  animation: loading 2s linear infinite;
+
+   &.theme0 {
+    border-top: 8px solid #4B406E;
+   }
+
+   &.theme1 {
+    border-top: 8px solid #005B5D;
+   }
+
+   &.theme2 {
+    border-top: 8px solid #9E905C;
+   }
+
+  @keyframes loading {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  &.loading {
+    display: flex;
+  }
+}

styles/index.scss

@@ -23,4 +23,5 @@
 @import 'components/cookie-banner/styles.scss';
 @import 'components/equalizer/styles.scss';
 @import 'components/link-button/styles.scss';
+@import 'components/spinner/styles.scss';