From 31675fd5f4ba13a164feaceff2b2c68c26761dee Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Thu, 13 Jul 2023 07:29:47 -0400
Subject: [PATCH] feat: Hide main menu when loading [PT-185596483]

---
 src/components/app.scss | 8 ++++++++
 src/components/app.tsx  | 6 +++++-
 src/hooks/use-codap.ts  | 6 +++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/app.scss b/src/components/app.scss
index 079782b..1310b28 100644
--- a/src/components/app.scss
+++ b/src/components/app.scss
@@ -7,6 +7,14 @@
   display: flex;
 }
 
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 2em;
+}
+
 .app {
   display: flex;
   flex-direction: column;
diff --git a/src/components/app.tsx b/src/components/app.tsx
index d95be63..5b984e0 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -72,7 +72,7 @@ export const App = () => {
   const currentSequenceIndex = useRef(0);
   const animationInterval = useRef<number>();
   const { graph, updateGraph, setGraph } = useGraph();
-  const { dragging, outputToDataset, viewMode, setViewMode, notifyStateIsDirty } = useCODAP({
+  const { dragging, outputToDataset, viewMode, setViewMode, notifyStateIsDirty, loadState } = useCODAP({
     onCODAPDataChanged: updateGraph,
     getGraph: useCallback(() => graph, [graph]),
     setGraph
@@ -351,6 +351,10 @@ export const App = () => {
     notifyStateIsDirty();
   };
 
+  if (loadState === "loading") {
+    return <div className="loading">Loading ...</div>;
+  }
+
   if (!viewMode) {
     return (
       <div className={clsx("app")}>
diff --git a/src/hooks/use-codap.ts b/src/hooks/use-codap.ts
index ce30e4a..ff848e0 100644
--- a/src/hooks/use-codap.ts
+++ b/src/hooks/use-codap.ts
@@ -37,6 +37,7 @@ export type UseCODAPOptions = {
 };
 
 export const useCODAP = ({onCODAPDataChanged, getGraph, setGraph}: UseCODAPOptions) => {
+  const [loadState, setLoadState] = useState<"loading"|"loaded">("loading");
   const [initialized, setInitialized] = useState(false);
   const [dragging, setDragging] = useState(false);
   const [attribute, setAttribute] = useState<CODAPAttribute|undefined>(undefined);
@@ -77,6 +78,8 @@ export const useCODAP = ({onCODAPDataChanged, getGraph, setGraph}: UseCODAPOptio
   }, [onCODAPDataChanged]);
 
   const setPluginState = useCallback((values: any) => {
+    setLoadState("loaded");
+
     if (values?.viewMode) {
       setViewMode(values.viewMode);
 
@@ -260,6 +263,7 @@ export const useCODAP = ({onCODAPDataChanged, getGraph, setGraph}: UseCODAPOptio
     outputToDataset,
     viewMode,
     setViewMode,
-    notifyStateIsDirty
+    notifyStateIsDirty,
+    loadState
   };
 };