feat: add spinner while fetching data (#396)

src/components/index.ts

@@ -9,6 +9,7 @@ export * from './hooks/index';
 export * from './layout-manager/index';
 export * from './modal/index';
 export * from './root-layout/index';
+export * from './spinner/index';
 export * from './split-pane/index';
 export * from './table/index';
 export * from './tabs/index';

src/components/spinner/FullSpinner.tsx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @emotion/react */
+import { css, keyframes } from '@emotion/react';
+
+const spin = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const spinnerStyle = css`
+  height: 40px;
+  width: 40px;
+  animation: ${spin} 0.8s linear infinite;
+`;
+
+export function FullSpinner() {
+  // First div is used when using nextjs/dynamic even after component is loaded
+  return (
+    <div style={{ height: '100%' }}>
+      <div
+        style={{
+          display: 'flex',
+          height: '100%',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <svg
+          css={spinnerStyle}
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            style={{ opacity: 0.25 }}
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            style={{ opacity: 0.75 }}
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}

src/components/spinner/index.ts

@@ -0,0 +1 @@
+export * from './FullSpinner';

src/pages/big-map/MainLayout.tsx

@@ -18,6 +18,7 @@ import {
   SplitPane,
   Toolbar,
   assert,
+  FullSpinner,
 } from '../../components/index';
 
 import { loadFiles } from './helpers/loadFiles';
@@ -80,11 +81,17 @@ export default function MainLayout() {
             initialClosed={500}
             controlledSide="end"
           >
-            <div css={mainCss.measurement}>
-              <DropZoneContainer onDrop={onDrop}>
-                {measurement ? <IvPlotView /> : null}
-              </DropZoneContainer>
-            </div>
+            {!measurement ? (
+              <div style={{ width: '100%', height: '100%' }}>
+                <FullSpinner />
+              </div>
+            ) : (
+              <div css={mainCss.measurement}>
+                <DropZoneContainer onDrop={onDrop}>
+                  {measurement ? <IvPlotView /> : null}
+                </DropZoneContainer>
+              </div>
+            )}
             <div css={mainCss.panels}>
               <Accordion>
                 <MeasurementsPanelAccordion />

stories/components/fullspinner.stories.tsx

@@ -0,0 +1,9 @@
+import { FullSpinner } from '../../src/components/index';
+
+export default {
+  title: 'Components / FullSpinner',
+};
+
+export function Spinner() {
+  return <FullSpinner />;
+}