re-structure to monorepo.

packages/webapp/src/components/Indicator/CloudLoadingIndicator.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import React from 'react';
+import classNames from 'classnames';
+import { Spinner } from '@blueprintjs/core';
+import { CLASSES } from '@/constants/classes';
+import { If } from '../Utils/If';
+
+export function CloudLoadingIndicator({ isLoading, children }) {
+  return (
+    <div
+      className={classNames(CLASSES.CLOUD_SPINNER, {
+        [CLASSES.IS_LOADING]: isLoading,
+      })}
+    >
+      <If condition={isLoading}>
+        <Spinner size={30} value={null} />
+      </If>
+      {children}
+    </div>
+  );
+}

packages/webapp/src/components/Indicator/LoadingIndicator.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+import React, { useState, useEffect, useMemo } from 'react';
+import { Spinner } from '@blueprintjs/core';
+
+export 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}
+    </>
+  );
+}

packages/webapp/src/components/Indicator/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './CloudLoadingIndicator';
+export * from './LoadingIndicator';