[Update] Add updating display.

src-ui/app/App.jsx

@@ -6,9 +6,10 @@ 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 { UpdatingComponent } from "./updating_component/UpdatingComponent";
 import { ModalController } from "./modal_controller/ModalController";
 import styles from "./App.module.scss";
-import { useIsBackendReady } from "@logics_common";
+import { useIsBackendReady, useIsSoftwareUpdating } from "@logics_common";
 
 export const App = () => {
     const { currentIsBackendReady } = useIsBackendReady();
@@ -34,14 +35,20 @@ export const App = () => {
 };
 
 const Contents = () => {
+    const { currentIsSoftwareUpdating } = useIsSoftwareUpdating();
     return (
         <>
             <WindowTitleBar />
+            {currentIsSoftwareUpdating.data === false
+            ?
             <div className={styles.pages_wrapper}>
                 <ConfigPage />
                 <MainPage />
                 <ModalController />
             </div>
+            :
+            <UpdatingComponent />
+            }
         </>
     );
 };

src-ui/app/modal_controller/update_modal/UpdateModal.jsx

@@ -2,18 +2,25 @@ import styles from "./UpdateModal.module.scss";
 import { useTranslation } from "react-i18next";
 import { useStore_OpenedQuickSetting } from "@store";
 import { useUpdateSoftware } from "@logics_common";
+import { useIsSoftwareUpdating } from "@logics_common";
 
 export const UpdateModal = () => {
     const { t } = useTranslation();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     const { updateSoftware } = useUpdateSoftware();
+    const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
+
+    const onClickUpdateSoftware = () => {
+        updateIsSoftwareUpdating(true);
+        updateSoftware();
+    };
 
     return (
         <div className={styles.container}>
             <p className={styles.label}>{t("main_page.confirmation_message.update_software")}</p>
             <div className={styles.button_wrapper}>
                 <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("main_page.confirmation_message.deny_update_software")}</button>
-                <button className={styles.accept_button} onClick={() => updateSoftware()}>{t("main_page.confirmation_message.accept_update_software")}</button>
+                <button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("main_page.confirmation_message.accept_update_software")}</button>
             </div>
         </div>
     );

src-ui/app/updating_component/UpdatingComponent.jsx

@@ -0,0 +1,22 @@
+import styles from "./UpdatingComponent.module.scss";
+import { useTranslation } from "react-i18next";
+import CircularProgress from "@mui/material/CircularProgress";
+import chat_white_square from "@images/chato_white_square.png";
+
+export const UpdatingComponent = () => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.chato_box}>
+                <img src={chat_white_square} className={styles.chato_img}/>
+            </div>
+            <div className={styles.circular_box}>
+                <CircularProgress size="20rem" sx={{
+                    color: "var(--primary_300_color)",
+                }}/>
+            </div>
+            <p className={styles.label}>{t("main_page.confirmation_message.updating")}</p>
+        </div>
+    );
+};

src-ui/app/updating_component/UpdatingComponent.module.scss

@@ -0,0 +1,52 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 4rem;
+    position: relative;
+}
+
+.label {
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2rem;
+}
+
+.circular_box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.chato_box {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.chato_img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 4.8rem;
+    animation: infinite-rotation 20s linear infinite 0.5s;
+}
+@keyframes infinite-rotation {
+    from {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}