From 2c7bb53b6495db518619ebd217e3b3ef726bfcef Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 14 Nov 2024 15:48:38 +0900
Subject: [PATCH] [Update] Starting Up: Add loading animation when the software
preparing, until backend is ready.
---
src-tauri/tauri.conf.json | 5 +++--
src-ui/app/App.jsx | 17 ++++++++++++++++-
src-ui/app/App.module.scss | 4 +++-
.../download_models/DownloadModels.jsx | 2 +-
.../app/splash_component/SplashComponent.jsx | 18 ++++++++++++++++++
.../SplashComponent.module.scss | 0
src-ui/logics/common/index.js | 1 +
src-ui/logics/common/useIsBackendReady.js | 15 +++++++++++++++
src-ui/logics/useReceiveRoutes.js | 3 +++
src-ui/store.js | 1 +
10 files changed, 61 insertions(+), 5 deletions(-)
create mode 100644 src-ui/app/splash_component/SplashComponent.jsx
create mode 100644 src-ui/app/splash_component/SplashComponent.module.scss
create mode 100644 src-ui/logics/common/useIsBackendReady.js
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index fbcb3acc..f48c4e72 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -39,8 +39,9 @@
"windows": [
{
"title": "VRCT",
- "width": 870,
- "height": 654,
+ "center": true,
+ "width": 400,
+ "height": 400,
"minWidth": 400,
"minHeight": 200,
"transparent": true,
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index b74393d4..e456d6c7 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -3,11 +3,15 @@ import { useStartPython } from "@logics/useStartPython";
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 { ModalController } from "./modal_controller/ModalController";
import styles from "./App.module.scss";
+import { useIsBackendReady } from "@logics_common";
export const App = () => {
+ const { currentIsBackendReady } = useIsBackendReady();
const { WindowGeometryController } = useWindow();
+
return (
@@ -18,13 +22,24 @@ export const App = () => {
+ {currentIsBackendReady.data === false
+ ?
+ :
+ }
+
+ );
+};
+
+const Contents = () => {
+ return (
+ <>
-
+
);
};
diff --git a/src-ui/app/App.module.scss b/src-ui/app/App.module.scss
index c6d364c3..6313451d 100644
--- a/src-ui/app/App.module.scss
+++ b/src-ui/app/App.module.scss
@@ -1,10 +1,12 @@
.container {
- // position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
+ justify-content: center;
+ background-color: var(--dark_888_color);
+ align-items: center;
}
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
index 747903a1..4ad4cc30 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
@@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
import clsx from "clsx";
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress from "@mui/material/CircularProgress";
import styles from "./DownloadModels.module.scss";
import {
RadioButton,
diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx
new file mode 100644
index 00000000..109fe552
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js
index cd14847f..4d4c52b9 100644
--- a/src-ui/logics/common/index.js
+++ b/src-ui/logics/common/index.js
@@ -1,3 +1,4 @@
+export { useIsBackendReady } from "./useIsBackendReady";
export { useWindow } from "./useWindow";
export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
diff --git a/src-ui/logics/common/useIsBackendReady.js b/src-ui/logics/common/useIsBackendReady.js
new file mode 100644
index 00000000..868028da
--- /dev/null
+++ b/src-ui/logics/common/useIsBackendReady.js
@@ -0,0 +1,15 @@
+import { useStore_IsBackendReady } from "@store";
+
+export const useIsBackendReady = () => {
+ const { currentIsBackendReady, updateIsBackendReady } = useStore_IsBackendReady();
+
+ const setIsBackendReady = (is_ready) => {
+ updateIsBackendReady(is_ready);
+ };
+
+ return {
+ currentIsBackendReady,
+ setIsBackendReady,
+ updateIsBackendReady,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 977e98b0..90ac073d 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -2,6 +2,7 @@ import { translator_status } from "@ui_configs";
import { arrayToObject } from "@utils";
import {
+ useIsBackendReady,
useWindow,
useMessage,
useVolume,
@@ -61,6 +62,7 @@ import {
} from "@logics_configs";
export const useReceiveRoutes = () => {
+ const { updateIsBackendReady } = useIsBackendReady();
const { restoreWindowGeometry } = useWindow();
const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
const {
@@ -438,6 +440,7 @@ export const useReceiveRoutes = () => {
case 200:
if (parsed_data.endpoint === "/run/initialization_complete") {
initDataSyncProcess(parsed_data.result);
+ updateIsBackendReady(true);
break;
};
const route = routes[parsed_data.endpoint];
diff --git a/src-ui/store.js b/src-ui/store.js
index 8a7f3c98..f215f193 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -102,6 +102,7 @@ const createAtomWithHook = (initialValue, base_name, options) => {
// Common
+export const { atomInstance: Atom_IsBackendReady, useHook: useStore_IsBackendReady } = createAtomWithHook(false, "IsBackendReady");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({
transcription_send: false,