Show loading indicator on first load while fetching

jungomi · Feb 9, 2020 · 519e0c2 · 519e0c2
1 parent ac61c5c
commit 519e0c2
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 30 deletions.
diff --git a/js/App.tsx b/js/App.tsx
@@ -12,6 +12,7 @@ import { Markdown } from "./Markdown";
 import { Overlay, OverlayContext, OverlayFn } from "./Overlay";
 import { Scalars } from "./Scalars";
 import { Names, Sidebar } from "./Sidebar";
+import { Loading } from "./Spinner";
 import {
   retrieveColours,
   retrieveNames,
@@ -134,17 +135,22 @@ export const App = () => {
           setNames={setNames}
           colours={colours}
           setColour={setNewColour}
+          loading={!hasFetched}
         />
         <main className={styles.main}>
-          {Content && (
-            <div className={styles.content}>
-              <Content
-                data={data}
-                colours={colours}
-                names={names.active}
-                hideName={hideName}
-              />
-            </div>
+          {hasFetched ? (
+            Content && (
+              <div className={styles.content}>
+                <Content
+                  data={data}
+                  colours={colours}
+                  names={names.active}
+                  hideName={hideName}
+                />
+              </div>
+            )
+          ) : (
+            <Loading />
           )}
         </main>
       </div>

diff --git a/js/Empty.tsx b/js/Empty.tsx
@@ -35,3 +35,11 @@ export const SmallEmpty: React.FC<Props> = ({ text }) => {
 export const EmptyDash: React.FC = () => {
   return <div className={baseClass}>—</div>;
 };
+
+export const EmptyLoading: React.FC = () => {
+  return <div className={emptyClass}>Loading</div>;
+};
+
+export const SmallEmptyLoading: React.FC = () => {
+  return <div className={smallEmptyClass}>Loading</div>;
+};
diff --git a/js/Sidebar.tsx b/js/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ColourPicker } from "./colour/ColourPicker";
 import { fieldHeight } from "./colour/ColourPicker.styles";
 import {
@@ -9,6 +9,7 @@ import {
 } from "./colour/definition";
 import { EmptyDash, SmallEmpty } from "./Empty";
 import * as styles from "./Sidebar.styles";
+import { SmallLoading } from "./Spinner";
 
 export type Names = { active: Array<string>; inactive: Array<string> };
 
@@ -37,13 +38,15 @@ type Props = {
   setNames: (names: Names) => void;
   colours: ColourMap;
   setColour: (name: string, colour: Colour) => void;
+  loading: boolean;
 };
 
 export const Sidebar: React.FC<Props> = ({
   names,
   setNames,
   colours,
-  setColour
+  setColour,
+  loading
 }) => {
   const listRef = useRef<HTMLDivElement>(null);
   const [shownColourPicker, setShownColourPicker] = useState<
@@ -174,12 +177,16 @@ export const Sidebar: React.FC<Props> = ({
       >
         <path d="M11.727 26.71l9.977-9.999a1.012 1.012 0 000-1.429l-9.97-9.991c-.634-.66-1.748-.162-1.723.734v19.943c-.023.893 1.083 1.377 1.716.742zm7.84-10.713l-7.55 7.566V8.431l7.55 7.566z" />
       </svg>
-      <div
-        className={shown ? styles.nameListContainer : styles.nameListHidden}
-        ref={listRef}
-      >
-        {hasData ? nameLists : <SmallEmpty text="data" />}
-      </div>
+      {loading ? (
+        <SmallLoading />
+      ) : (
+        <div
+          className={shown ? styles.nameListContainer : styles.nameListHidden}
+          ref={listRef}
+        >
+          {hasData ? nameLists : <SmallEmpty text="data" />}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/js/Spinner.styles.ts b/js/Spinner.styles.ts
@@ -0,0 +1,24 @@
+import { css, keyframes } from "emotion";
+
+const animation = keyframes({
+  "0%": { transform: "scale(0)" },
+  "100%": { transform: "scale(1.0)", opacity: 0 }
+});
+
+export const spinner = css({
+  width: "2rem",
+  height: "2rem",
+  background: "grey",
+  borderRadius: "50%",
+  animation: `${animation} 1.0s infinite ease-in-out`
+});
+
+export const loading = css({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center"
+});
+
+export const loadingSpinner = css({
+  marginTop: "0.8rem"
+});
diff --git a/js/Spinner.tsx b/js/Spinner.tsx
@@ -1,17 +1,23 @@
-import { css, keyframes } from "emotion";
 import React from "react";
+import { EmptyLoading, SmallEmptyLoading } from "./Empty";
+import * as styles from "./Spinner.styles";
 
-const animation = keyframes({
-  "0%": { transform: "scale(0)" },
-  "100%": { transform: "scale(1.0)", opacity: 0 }
-});
+export const Spinner: React.FC = () => <div className={styles.spinner} />;
 
-const spinnerClass = css({
-  width: "2rem",
-  height: "2rem",
-  background: "grey",
-  borderRadius: "50%",
-  animation: `${animation} 1.0s infinite ease-in-out`
-});
+export const Loading: React.FC = () => (
+  <div className={styles.loading}>
+    <EmptyLoading />
+    <div className={styles.loadingSpinner}>
+      <Spinner />
+    </div>
+  </div>
+);
 
-export const Spinner: React.FC = () => <div className={spinnerClass} />;
+export const SmallLoading: React.FC = () => (
+  <div className={styles.loading}>
+    <SmallEmptyLoading />
+    <div className={styles.loadingSpinner}>
+      <Spinner />
+    </div>
+  </div>
+);