Merge pull request #40 from phuoc-ng/fallback-loading

Add fallback loading

client/loaders/DetailsLoader.jsx

@@ -1,7 +1,27 @@
+import React from 'react';
 import loadable from '@loadable/component';
 
+import './spinner.css';
+
 const slug = item => item.toLowerCase().split(' ').join('-');
 
-const DetailsLoader = loadable(props => import(`../patterns/${slug(props.pattern)}/Details`));
+const DetailsLoader = loadable(props => import(`../patterns/${slug(props.pattern)}/Details`), {
+    fallback: (
+        <div className="w100 h-100 flex items-center justify-center">
+            <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
+                <circle
+                    cx="16"
+                    cy="16"
+                    fill="none"
+                    r="12"
+                    stroke="rgba(0, 0, 0, 0.4)"
+                    strokeDasharray={Math.PI * 2 * 9}
+                    strokeLinecap="round"
+                    strokeWidth="4"
+                />
+            </svg>
+        </div>
+    )
+});
 
 export default DetailsLoader;

client/loaders/spinner.css

@@ -0,0 +1,16 @@
+.spinner {
+    animation-duration: 750ms;
+    animation-name: viewer-spinner-transform;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    transition-property: transform;
+}
+
+@keyframes viewer-spinner-transform {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}