chrone: sperate client and server to different repos.

src/components/LoadingIndicator.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Spinner } from '@blueprintjs/core';
+
+export default function LoadingIndicator({
+  loading,
+  spinnerSize = 40,
+  children,
+  mount = false,
+}) {
+  const [rendered, setRendered] = useState(mount);
+
+  useEffect(() => {
+    if (!loading) {
+      setRendered(true);
+    }
+  }, [loading]);
+
+  const componentStyle = useMemo(() => {
+    return { display: !loading ? 'block' : 'none' };
+  }, [loading]);
+
+  const loadingComponent = useMemo(
+    () => (
+      <div class="dashboard__loading-indicator">
+        <Spinner size={spinnerSize} value={null} />
+      </div>
+    ),
+    [spinnerSize],
+  );
+
+  // Renders children with wrapper or without wrapper, in mount mode
+  // rendering with wrapper.
+  const renderChildren = useMemo(
+    () => (mount ? <div style={componentStyle}>{children}</div> : children),
+    [children, mount, componentStyle],
+  );
+
+  // Render children component or not in loading and in mount mode rendering
+  // anyway.
+  const renderComponent = useMemo(
+    () => (!loading || mount ? renderChildren : null),
+    [renderChildren, loading, mount],
+  );
+  const maybeRenderComponent = rendered && children && renderComponent;
+  const maybeRenderLoadingSpinner = loading && loadingComponent;
+
+  return (
+    <>
+      {maybeRenderLoadingSpinner}
+      {maybeRenderComponent}
+    </>
+  );
+}