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(); 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
Loading ...
; + } + if (!viewMode) { return (
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(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 }; };