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

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