Move MainMenu Loading to App + Change is/setLoaded to appState/setAppState

src/Components/App/Actions/Load.ts

@@ -1,13 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
+import { AppState } from '../../../Enums/AppState';
 import { IEditorState } from '../../../Interfaces/IEditorState';
 import { Revive } from '../../../utils/saveload';
 
 export function LoadState(
   editorState: IEditorState,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  setAppState: Dispatch<SetStateAction<AppState>>
 ): void {
   Revive(editorState);
   setEditorState(editorState);
-  setLoaded(true);
+  setAppState(AppState.Loaded);
 }

src/Components/App/Actions/MenuActions.ts

@@ -1,9 +1,10 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { IConfiguration } from '../../../Interfaces/IConfiguration';
 import { FetchConfiguration } from '../../API/api';
 import { IEditorState } from '../../../Interfaces/IEditorState';
 import { LoadState } from './Load';
 import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
+import { AppState } from '../../../Enums/AppState';
 
 export function NewEditor(
   editorState: IEditorState,
@@ -36,7 +37,7 @@ export function NewEditor(
 export function LoadEditor(
   files: FileList | null,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  setAppState: Dispatch<SetStateAction<AppState>>
 ): void {
   if (files === null) {
     return;
@@ -47,7 +48,7 @@ export function LoadEditor(
     const result = reader.result as string;
     const editorState: IEditorState = JSON.parse(result);
 
-    LoadState(editorState, setEditorState, setLoaded);
+    LoadState(editorState, setEditorState, setAppState);
   });
   reader.readAsText(file);
 }

src/Components/App/App.tsx

@@ -7,6 +7,8 @@ import { IEditorState } from '../../Interfaces/IEditorState';
 import { LoadState } from './Actions/Load';
 import { LoadEditor, NewEditor } from './Actions/MenuActions';
 import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
+import { AppState } from '../../Enums/AppState';
+import { Loader } from '../Loader/Loader';
 
 // App will never have props
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -15,9 +17,9 @@ interface IAppProps {
 }
 
 function UseHTTPGETStatePreloading(
-  isLoaded: boolean,
+  appState: AppState,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  setAppState: Dispatch<SetStateAction<AppState>>
 ): void {
   useEffect(() => {
     const queryString = window.location.search;
@@ -28,21 +30,21 @@ function UseHTTPGETStatePreloading(
       return;
     }
 
-    if (!isLoaded) {
+    if (appState !== AppState.Loaded) {
       fetch(state)
         .then(
           async(response) => await response.json(),
           (error) => { throw new Error(error); }
         )
         .then((data: IEditorState) => {
-          LoadState(data, setEditorState, setLoaded);
+          LoadState(data, setEditorState, setAppState);
         }, (error) => { throw new Error(error); });
     }
   });
 };
 
 export function App(props: IAppProps): JSX.Element {
-  const [isLoaded, setLoaded] = useState<boolean>(false);
+  const [appState, setAppState] = useState<AppState>(AppState.MainMenu);
   const appRef = useRef<HTMLDivElement>(null);
 
   const defaultMainContainer = new ContainerModel(
@@ -69,48 +71,59 @@ export function App(props: IAppProps): JSX.Element {
     props.root,
     appRef,
     setEditorState,
-    setLoaded
+    setAppState
   );
 
-  UseHTTPGETStatePreloading(isLoaded, setEditorState, setLoaded);
+  UseHTTPGETStatePreloading(appState, setEditorState, setAppState);
 
-  const enableLoaded = useCallback(() => {
-    setLoaded(true);
-  }, []);
-
-  if (isLoaded) {
-    return (
-      <div
-        ref={appRef}
-        className='App'
-      >
-        <Editor
-          root={props.root}
-          configuration={editorState.configuration}
-          history={editorState.history}
-          historyCurrentStep={editorState.historyCurrentStep}
-        />
-      </div>
-    );
+  switch (appState) {
+    case AppState.Loaded:
+      return (
+        <div
+          ref={appRef}
+          className='App'
+        >
+          <Editor
+            root={props.root}
+            configuration={editorState.configuration}
+            history={editorState.history}
+            historyCurrentStep={editorState.historyCurrentStep}
+          />
+        </div>
+      );
+    case AppState.Loading:
+      return (
+        <div
+          ref={appRef}
+          className='App mainmenu-bg'
+        >
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+            <Loader />
+          </div>
+        </div>
+      );
+    default:
+      return (
+        <div
+          ref={appRef}
+          className='App mainmenu-bg'
+        >
+          <MainMenu
+            newEditor={() => {
+              setAppState(AppState.Loading);
+              NewEditor(
+                editorState,
+                (newEditor) => setEditorState(newEditor),
+                () => setAppState(AppState.Loaded)
+              );
+            }}
+            loadEditor={(files: FileList | null) => LoadEditor(
+              files,
+              setEditorState,
+              setAppState
+            )}
+          />
+        </div>
+      );
   }
-
-  return (
-    <div
-      ref={appRef}
-      className='App mainmenu-bg'
-    >
-      <MainMenu
-        newEditor={() => NewEditor(
-          editorState,
-          (newEditor) => setEditorState(newEditor),
-          enableLoaded
-        )}
-        loadEditor={(files: FileList | null) => LoadEditor(
-          files,
-          setEditorState,
-          setLoaded
-        )}
-      />
-    </div>
-  );
 };