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

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>
-  );
 };