Merge pull request #22 from concord-consortium/185596483-hide-main-me…

…nu-when-loading feat: Hide main menu when loading [PT-185596483]
concord-consortium · Jul 13, 2023 · 04b7805 · 04b7805
2 parents 5bdd4c2 + 31675fd
commit 04b7805
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
   };
 };