From b51972a2ed1228141dd6fbcfaf5472cf338d39f3 Mon Sep 17 00:00:00 2001
From: mluena <maluenarod@gmail.com>
Date: Mon, 22 Feb 2021 11:08:10 +0100
Subject: [PATCH] spinner added to dynamic imports

---
 components/layout/component.js   |  7 ++++++-
 components/spinner/component.jsx | 18 +++++++++++++++++
 components/spinner/index.js      |  1 +
 components/spinner/styles.scss   | 33 ++++++++++++++++++++++++++++++++
 styles/index.scss                |  1 +
 5 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 components/spinner/component.jsx
 create mode 100644 components/spinner/index.js
 create mode 100644 components/spinner/styles.scss

diff --git a/components/layout/component.js b/components/layout/component.js
index 5761e62..eceabc1 100644
--- a/components/layout/component.js
+++ b/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}`}>
diff --git a/components/spinner/component.jsx b/components/spinner/component.jsx
new file mode 100644
index 0000000..4c2323f
--- /dev/null
+++ b/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;
diff --git a/components/spinner/index.js b/components/spinner/index.js
new file mode 100644
index 0000000..76f86e1
--- /dev/null
+++ b/components/spinner/index.js
@@ -0,0 +1 @@
+export { default } from './component';
\ No newline at end of file
diff --git a/components/spinner/styles.scss b/components/spinner/styles.scss
new file mode 100644
index 0000000..6484094
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index e270fd9..84022ff 100644
--- a/styles/index.scss
+++ b/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';