Added loading screen

YARC-Official · Jan 10, 2024 · a5c6a7d · a5c6a7d
1 parent cadbe14
commit a5c6a7d
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 52 deletions.
diff --git a/src/components/LoadingScreen/LoadingScreen.module.css b/src/components/LoadingScreen/LoadingScreen.module.css
@@ -0,0 +1,17 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 50px;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    background: var(--sideBar_background);
+
+    color: #FFF;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
diff --git a/src/components/LoadingScreen/index.tsx b/src/components/LoadingScreen/index.tsx
@@ -0,0 +1,9 @@
+import styles from "./LoadingScreen.module.css";
+
+const LoadingScreen: React.FC = () => {
+    return <div className={styles.container}>
+        <p>Loading...</p>
+    </div>;
+};
+
+export default LoadingScreen;
diff --git a/src/hooks/useSetlistData.ts b/src/hooks/useSetlistData.ts
@@ -28,19 +28,17 @@ export const useSetlistData = (setlistData: SetlistData | undefined, setlistId:
     const payload = usePayload(task?.taskUUID);
 
     useEffect(() => {
-        (
-            async () => {
-                if (state || !setlistData) return;
-
-                const exists = await invoke("exists", {
-                    appName: "official_setlist",
-                    version: setlistData.version,
-                    profile: setlistData.id
-                });
-
-                setState(exists ? SetlistStates.AVAILABLE : SetlistStates.NEW_UPDATE);
-            }
-        )();
+        (async () => {
+            if (state || !setlistData) return;
+
+            const exists = await invoke("exists", {
+                appName: "official_setlist",
+                version: setlistData.version,
+                profile: setlistData.id
+            });
+
+            setState(exists ? SetlistStates.AVAILABLE : SetlistStates.NEW_UPDATE);
+        })();
     }, [setlistData]);
 
     // If we don't have a release data yet, return a dummy loading version;

diff --git a/src/hooks/useYARGVersion.ts b/src/hooks/useYARGVersion.ts
@@ -33,19 +33,17 @@ export const useYARGVersion = (releaseData: ExtendedReleaseData | undefined, pro
     const payload = usePayload(task?.taskUUID);
 
     useEffect(() => {
-        (
-            async () => {
-                if (state || !releaseData) return;
-
-                const exists = await invoke("exists", {
-                    appName: "yarg",
-                    version: releaseData.tag_name,
-                    profile: profileName
-                });
-
-                setState(exists ? YARGStates.AVAILABLE : YARGStates.NEW_UPDATE);
-            }
-        )();
+        (async () => {
+            if (state || !releaseData) return;
+
+            const exists = await invoke("exists", {
+                appName: "yarg",
+                version: releaseData.tag_name,
+                profile: profileName
+            });
+
+            setState(exists ? YARGStates.AVAILABLE : YARGStates.NEW_UPDATE);
+        })();
     }, [releaseData]);
 
     // If we don't have a release data yet, return a dummy loading version;

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./styles.css";
 import TitleBar from "./components/TitleBar";
@@ -12,38 +12,67 @@ import { ErrorBoundary } from "react-error-boundary";
 import { ErrorScreen, onError } from "./routes/ErrorScreen";
 import { error as LogError } from "tauri-plugin-log-api";
 import { serializeError } from "serialize-error";
+import LoadingScreen from "./components/LoadingScreen";
 
 window.addEventListener("error", event => {
     LogError(JSON.stringify(serializeError(event)));
 });
 
-invoke("init").then(() => {
-    ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-        <React.StrictMode>
-            <ErrorBoundary FallbackComponent={ErrorScreen} onError={onError}>
-                <DialogProvider>
-                    <TitleBar />
-                    <QueryClientProvider client={queryClient}>
-                        <RouterProvider router={Router} />
-                    </QueryClientProvider>
-                </DialogProvider>
-            </ErrorBoundary>
-        </React.StrictMode>
-    );
-}).catch(e => {
-    console.error(e);
-    LogError(JSON.stringify(serializeError(e)));
-
-    ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-        <React.StrictMode>
+const App: React.FC = () => {
+    const [loading, setLoading] = useState(true);
+    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, 500));
+            } catch (e) {
+                console.error(e);
+                LogError(JSON.stringify(serializeError(e)));
+
+                setError(e);
+            } finally {
+                setLoading(false);
+            }
+        })();
+    }, []);
+
+    // Show loading screen
+    if (loading) {
+        return <React.StrictMode>
+            <TitleBar />
+            <LoadingScreen />
+        </React.StrictMode>;
+    }
+
+    // Show error screen
+    if (error) {
+        return <React.StrictMode>
             <TitleBar />
             <p>
                 A fatal error has occurred when attempted to initalize the launcher.
                 Please report this to our Discord or GitHub immediately.
             </p>
             <p>
-                {e instanceof Error ? e.message : JSON.stringify(serializeError(e))}
+                {error instanceof Error ? error.message : JSON.stringify(serializeError(error))}
             </p>
-        </React.StrictMode>
-    );
-});
+        </React.StrictMode>;
+    }
+
+    // Show main screen
+    return <React.StrictMode>
+        <ErrorBoundary FallbackComponent={ErrorScreen} onError={onError}>
+            <DialogProvider>
+                <TitleBar />
+                <QueryClientProvider client={queryClient}>
+                    <RouterProvider router={Router} />
+                </QueryClientProvider>
+            </DialogProvider>
+        </ErrorBoundary>
+    </React.StrictMode>;
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />);
diff --git a/src/styles.css b/src/styles.css
@@ -16,7 +16,7 @@
     --green-10: rgba(var(--green-rgb), .1);
 
     --titleBar_background: #000209;
-    --titleBar_primary: #fff;
+    --titleBar_primary: #FFF;
     --titleBar_accent: #868AA8;
     --titleBar_height: 30px;
 
@@ -34,7 +34,7 @@
     --buttonText_blue: #002A3D;
     --buttonText_yellow: #351A00;
     --buttonText_gray: #737373;
-    --buttonText_red: #fff;
+    --buttonText_red: #FFF;
 }
 
 * {