From bc4191f1bf5f35208963d0092d3aa57821c9bdfe Mon Sep 17 00:00:00 2001
From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com>
Date: Wed, 17 Jan 2024 16:37:15 -0500
Subject: [PATCH] Quickly move loading stuff into a different component before
 release

---
 src/components/LoadingScreen/index.tsx | 50 ++++++++++++++++++++++++--
 src/main.tsx                           | 45 +++--------------------
 2 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/src/components/LoadingScreen/index.tsx b/src/components/LoadingScreen/index.tsx
index 1e0b529..7cd9306 100644
--- a/src/components/LoadingScreen/index.tsx
+++ b/src/components/LoadingScreen/index.tsx
@@ -1,12 +1,58 @@
+import { useEffect, useState } from "react";
 import styles from "./LoadingScreen.module.css";
 import * as Progress from "@radix-ui/react-progress";
+import { error as logError } from "tauri-plugin-log-api";
+import { serializeError } from "serialize-error";
+import { invoke } from "@tauri-apps/api/tauri";
+
+enum LoadingState {
+    "LOADING",
+    "FADE_OUT",
+    "DONE"
+}
 
 interface Props {
-    fadeOut: boolean;
+    setError: React.Dispatch<unknown>;
 }
 
 const LoadingScreen: React.FC<Props> = (props: Props) => {
-    return <div className={styles.container} style={{opacity: props.fadeOut ? 0 : 1}}>
+    const [loading, setLoading] = useState(LoadingState.LOADING);
+
+    // Load
+    useEffect(() => {
+        (async () => {
+            try {
+                await invoke("init");
+
+                // Add a tiny bit of delay so the loading screen doesn't just instantly disappear
+                await new Promise(r => setTimeout(r, 250));
+            } catch (e) {
+                console.error(e);
+                logError(JSON.stringify(serializeError(e)));
+
+                // If there's an error, just instantly hide the loading screen
+                props.setError(e);
+                setLoading(LoadingState.DONE);
+
+                return;
+            }
+
+            // The loading screen takes 250ms to fade out
+            setLoading(LoadingState.FADE_OUT);
+            await new Promise(r => setTimeout(r, 250));
+
+            // Done!
+            setLoading(LoadingState.DONE);
+        })();
+    }, []);
+
+    // Don't display anything if done
+    if (loading == LoadingState.DONE) {
+        return <></>;
+    }
+
+    // Display loading screen
+    return <div className={styles.container} style={{opacity: loading ? 0 : 1}}>
         <Progress.Root className={styles.progressRoot}>
             <Progress.Indicator className={styles.progressIndicator} />
         </Progress.Root>
diff --git a/src/main.tsx b/src/main.tsx
index cdfd3f2..1a85882 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,60 +1,25 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./styles.css";
 import TitleBar from "./components/TitleBar";
 import { RouterProvider } from "react-router-dom";
 import Router from "@app/routes";
-import { invoke } from "@tauri-apps/api/tauri";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "./query";
 import { DialogProvider } from "./dialogs/DialogProvider";
 import { ErrorBoundary } from "react-error-boundary";
 import { ErrorScreen, onError } from "./routes/ErrorScreen";
-import { error as LogError } from "tauri-plugin-log-api";
+import { error as logError } from "tauri-plugin-log-api";
 import { serializeError } from "serialize-error";
 import LoadingScreen from "./components/LoadingScreen";
 
-enum LoadingState {
-    "LOADING",
-    "FADE_OUT",
-    "DONE"
-}
-
 window.addEventListener("error", event => {
-    LogError(JSON.stringify(serializeError(event)));
+    logError(JSON.stringify(serializeError(event)));
 });
 
 const App: React.FC = () => {
-    const [loading, setLoading] = useState(LoadingState.LOADING);
     const [error, setError] = useState<unknown>(null);
 
-    useEffect(() => {
-        (async () => {
-            try {
-                await invoke("init");
-
-                // Add a tiny bit of delay so the loading screen doesn't just instantly disappear
-                await new Promise(r => setTimeout(r, 250));
-            } catch (e) {
-                console.error(e);
-                LogError(JSON.stringify(serializeError(e)));
-
-                // If there's an error, just instantly hide the loading screen
-                setError(e);
-                setLoading(LoadingState.DONE);
-
-                return;
-            }
-
-            // The loading screen takes 250ms to fade out
-            setLoading(LoadingState.FADE_OUT);
-            await new Promise(r => setTimeout(r, 250));
-
-            // Done!
-            setLoading(LoadingState.DONE);
-        })();
-    }, []);
-
     // Show error screen
     if (error) {
         return <React.StrictMode>
@@ -71,9 +36,7 @@ const App: React.FC = () => {
 
     // Show main screen
     return <React.StrictMode>
-        {loading != LoadingState.DONE &&
-            <LoadingScreen fadeOut={loading == LoadingState.FADE_OUT} />
-        }
+        <LoadingScreen setError={setError} />
 
         <ErrorBoundary FallbackComponent={ErrorScreen} onError={onError}>
             <DialogProvider>