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

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