[Update] Add updating display.

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