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

src-ui/logics/common/index.js

@@ -4,6 +4,7 @@ export { useIsBackendReady } from "./useIsBackendReady";
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
 export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
+export { useIsSoftwareUpdating } from "./useIsSoftwareUpdating";
 export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
 export { useUpdateSoftware } from "./useUpdateSoftware";

src-ui/logics/common/useIsSoftwareUpdating.js

@@ -0,0 +1,10 @@
+import { useStore_IsSoftwareUpdating } from "@store";
+
+export const useIsSoftwareUpdating = () => {
+    const { currentIsSoftwareUpdating, updateIsSoftwareUpdating } = useStore_IsSoftwareUpdating();
+
+    return {
+        currentIsSoftwareUpdating,
+        updateIsSoftwareUpdating,
+    };
+};

src-ui/store.js

@@ -114,6 +114,7 @@ export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQu
 export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
 export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
 export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint");
+export const { atomInstance: Atom_IsSoftwareUpdating, useHook: useStore_IsSoftwareUpdating } = createAtomWithHook(false, "IsSoftwareUpdating");
 
 // Main Page
 // Functions