diff --git a/src/components/LoadingScreen/LoadingScreen.module.css b/src/components/LoadingScreen/LoadingScreen.module.css
new file mode 100644
index 0000000..1530e13
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/src/components/LoadingScreen/index.tsx b/src/components/LoadingScreen/index.tsx
new file mode 100644
index 0000000..49bde5a
--- /dev/null
+++ b/src/components/LoadingScreen/index.tsx
@@ -0,0 +1,9 @@
+import styles from "./LoadingScreen.module.css";
+
+const LoadingScreen: React.FC = () => {
+ return
;
+};
+
+export default LoadingScreen;
\ No newline at end of file
diff --git a/src/hooks/useSetlistData.ts b/src/hooks/useSetlistData.ts
index f6ed470..1982985 100644
--- 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
index bafb512..abe884f 100644
--- 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
index 3618cda..4d2dc08 100644
--- 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(
-
-
-
-
-
-
-
-
-
-
- );
-}).catch(e => {
- console.error(e);
- LogError(JSON.stringify(serializeError(e)));
-
- ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
+const App: React.FC = () => {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(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
+
+
+ ;
+ }
+
+ // Show error screen
+ if (error) {
+ return
A fatal error has occurred when attempted to initalize the launcher.
Please report this to our Discord or GitHub immediately.
- {e instanceof Error ? e.message : JSON.stringify(serializeError(e))}
+ {error instanceof Error ? error.message : JSON.stringify(serializeError(error))}
-
- );
-});
\ No newline at end of file
+ ;
+ }
+
+ // Show main screen
+ return
+
+
+
+
+
+
+
+
+ ;
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render();
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index ae72754..688253a 100644
--- 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;
}
* {