[Update] Starting Up: Add loading animation when the software preparing, until backend is ready.

src-tauri/tauri.conf.json

@@ -39,8 +39,9 @@
 "windows": [
     {
         "title": "VRCT",
-        "width": 870,
-        "height": 654,
+        "center": true,
+        "width": 400,
+        "height": 400,
         "minWidth": 400,
         "minHeight": 200,
         "transparent": true,

src-ui/app/App.jsx

@@ -3,11 +3,15 @@ import { useStartPython } from "@logics/useStartPython";
 import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
+import { SplashComponent } from "./splash_component/SplashComponent";
 import { ModalController } from "./modal_controller/ModalController";
 import styles from "./App.module.scss";
+import { useIsBackendReady } from "@logics_common";
 
 export const App = () => {
+    const { currentIsBackendReady } = useIsBackendReady();
     const { WindowGeometryController } = useWindow();
+
     return (
         <div className={styles.container}>
             <StartPythonFacadeComponent />
@@ -18,13 +22,24 @@ export const App = () => {
             <TransparencyController />
             <WindowGeometryController />
 
+            {currentIsBackendReady.data === false
+            ? <SplashComponent />
+            : <Contents />
+            }
+        </div>
+    );
+};
+
+const Contents = () => {
+    return (
+        <>
             <WindowTitleBar />
             <div className={styles.pages_wrapper}>
                 <ConfigPage />
                 <MainPage />
                 <ModalController />
             </div>
-        </div>
+        </>
     );
 };
 

src-ui/app/App.module.scss

@@ -1,10 +1,12 @@
 .container {
-    // position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    background-color: var(--dark_888_color);
+    align-items: center;
 }
 
 

src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import clsx from "clsx";
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress from "@mui/material/CircularProgress";
 import styles from "./DownloadModels.module.scss";
 import {
     RadioButton,

src-ui/app/splash_component/SplashComponent.jsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+import CircularProgress from '@mui/material/CircularProgress';
+import styles from "./SplashComponent.module.scss";
+
+export const SplashComponent = () => {
+    const [circular_color, setCircularColor] = useState("");
+    useEffect(() => {
+        const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
+        setCircularColor(circular_color.trim());
+    }, []);
+
+    return (
+        <div>
+            <CircularProgress size="14rem" sx={{ color: circular_color }}/>
+        </div>
+    );
+};

src-ui/logics/common/index.js

@@ -1,3 +1,4 @@
+export { useIsBackendReady } from "./useIsBackendReady";
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
 export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";

src-ui/logics/common/useIsBackendReady.js

@@ -0,0 +1,15 @@
+import { useStore_IsBackendReady } from "@store";
+
+export const useIsBackendReady = () => {
+    const { currentIsBackendReady, updateIsBackendReady } = useStore_IsBackendReady();
+
+    const setIsBackendReady = (is_ready) => {
+        updateIsBackendReady(is_ready);
+    };
+
+    return {
+        currentIsBackendReady,
+        setIsBackendReady,
+        updateIsBackendReady,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -2,6 +2,7 @@ import { translator_status } from "@ui_configs";
 import { arrayToObject } from "@utils";
 
 import {
+    useIsBackendReady,
     useWindow,
     useMessage,
     useVolume,
@@ -61,6 +62,7 @@ import {
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
+    const { updateIsBackendReady } = useIsBackendReady();
     const { restoreWindowGeometry } = useWindow();
     const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
     const {
@@ -438,6 +440,7 @@ export const useReceiveRoutes = () => {
             case 200:
                 if (parsed_data.endpoint === "/run/initialization_complete") {
                     initDataSyncProcess(parsed_data.result);
+                    updateIsBackendReady(true);
                     break;
                 };
                 const route = routes[parsed_data.endpoint];

src-ui/store.js

@@ -102,6 +102,7 @@ const createAtomWithHook = (initialValue, base_name, options) => {
 
 
 // Common
+export const { atomInstance: Atom_IsBackendReady, useHook: useStore_IsBackendReady } = createAtomWithHook(false, "IsBackendReady");
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({
     transcription_send: false,