[Update] Add Starting Up Animation and downloading models progress display.

Backend: Move the init progressed position 4 to a little bit earlier.

src-ui/app/splash_component/SplashComponent.jsx

@@ -1,51 +1,12 @@
-import { useState, useEffect } from "react";
-
-import CircularProgress from '@mui/material/CircularProgress';
 import styles from "./SplashComponent.module.scss";
-import {
-    useCTranslate2WeightTypeStatus,
-    useWhisperWeightTypeStatus,
-} from "@logics_configs";
+import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
+import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
 
 export const SplashComponent = () => {
-    const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
-    const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
-
-    const [circular_color, setCircularColor] = useState("");
-    useEffect(() => {
-        const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
-        setCircularColor(circular_color.trim());
-    }, []);
-
-    console.log(currentCTranslate2WeightTypeStatus);
-    const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
-    const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
-    console.log(c_translate_2, whisper);
-
-
-
     return (
         <div>
-            <DownloadModelsProgress color={circular_color} progress={c_translate_2.progress}/>
-            <CircularProgress size="14rem" sx={{ color: circular_color }}/>
-            <DownloadModelsProgress color={circular_color} progress={whisper.progress}/>
-        </div>
-    );
-};
-
-const DownloadModelsProgress = (props) => {
-    if (props.progress === null) return null;
-    const circular_progress = Math.floor(props.progress / 10) * 10;
-
-    return(
-        <div className={styles.progress_container}>
-            <CircularProgress
-                variant={(props.progress === 100) ? "indeterminate" : "determinate"}
-                value={circular_progress}
-                size="4rem"
-                sx={{ color: props.color }}
-            />
-            <p className={styles.progress_label}>{`${Math.round(props.progress)}%`}</p>
+            <StartUpProgressContainer />
+            <DownloadModelsContainer />
         </div>
     );
 };