fix: GPU変更のダイアログがクリックできなかったのを修正 (#2507)

Co-authored-by: Hiroshiba <[email protected]>
Co-authored-by: Hiroshiba Kazuyuki <[email protected]>

src/components/Dialog/Dialog.ts

@@ -54,8 +54,6 @@ export type NotifyAndNotShowAgainButtonOption = {
   tipName: keyof ConfirmedTips;
 };
 
-export type LoadingScreenOption = { message: string };
-
 // 汎用ダイアログを表示
 
 /** メッセージを知らせるダイアログ */
@@ -404,6 +402,8 @@ export const showNotifyAndNotShowAgainButton = (
   });
 };
 
+type LoadingScreenOption = { message: string };
+
 export const showLoadingScreen = (options: LoadingScreenOption) => {
   Loading.show({
     spinnerColor: "primary",

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -681,16 +681,10 @@ const acceptRetrieveTelemetryComputed = computed({
 });
 
 const changeUseGpu = async (useGpu: boolean) => {
-  void store.actions.SHOW_LOADING_SCREEN({
-    message: "起動モードを変更中です",
-  });
-
   await store.actions.CHANGE_USE_GPU({
     useGpu,
     engineId: selectedEngineId.value,
   });
-
-  void store.actions.HIDE_ALL_LOADING_SCREEN();
 };
 
 const changeinheritAudioInfo = async (inheritAudioInfo: boolean) => {

src/store/setting.ts

@@ -3,7 +3,9 @@ import { createUILockAction } from "./ui";
 import { createPartialStore } from "./vuex";
 import { themes } from "@/domain/theme";
 import {
+  hideAllLoadingScreen,
   showAlertDialog,
+  showLoadingScreen,
   showQuestionDialog,
 } from "@/components/Dialog/Dialog";
 import {
@@ -357,24 +359,34 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
      */
     action: createUILockAction(
       async ({ state, actions }, { useGpu, engineId }) => {
-        const isAvailableGPUMode = await window.backend.isAvailableGPUMode();
-
         // 対応するGPUがない場合に変更を続行するか問う
-        if (useGpu && !isAvailableGPUMode) {
-          const result = await showQuestionDialog({
-            type: "warning",
-            title: "対応するGPUデバイスが見つかりません",
-            message:
-              "GPUモードの利用には対応するGPUデバイスが必要です。\n" +
-              "このままGPUモードに変更するとエンジンエラーが発生する可能性があります。本当に変更しますか？",
-            buttons: ["変更しない", "変更する"],
-            cancel: 0,
-          });
-          if (result == 0) {
-            return;
+        if (useGpu) {
+          showLoadingScreen({ message: "GPUデバイスを確認中です" });
+
+          const isAvailableGPUMode = await window.backend.isAvailableGPUMode();
+
+          hideAllLoadingScreen();
+
+          if (!isAvailableGPUMode) {
+            const result = await showQuestionDialog({
+              type: "warning",
+              title: "対応するGPUデバイスが見つかりません",
+              message:
+                "GPUモードの利用には対応するGPUデバイスが必要です。\n" +
+                "このままGPUモードに変更するとエンジンエラーが発生する可能性があります。本当に変更しますか？",
+              buttons: ["変更しない", "変更する"],
+              cancel: 0,
+            });
+            if (result == 0) {
+              return;
+            }
           }
         }
 
+        showLoadingScreen({
+          message: "起動モードを変更中です",
+        });
+
         void actions.SET_ENGINE_SETTING({
           engineSetting: { ...state.engineSettings[engineId], useGpu },
           engineId,
@@ -383,6 +395,8 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
           engineIds: [engineId],
         });
 
+        hideAllLoadingScreen();
+
         // GPUモードに変更できなかった場合はCPUモードに戻す
         // FIXME: useGpu設定を保存してからエンジン起動を試すのではなく、逆にしたい
         if (!result.success && useGpu) {

src/store/type.ts

@@ -58,7 +58,6 @@ import { IEngineConnectorFactory } from "@/infrastructures/EngineConnector";
 import {
   TextDialogResult,
   NotifyAndNotShowAgainButtonOption,
-  LoadingScreenOption,
   MessageDialogOptions,
   ConfirmDialogOptions,
   WarningDialogOptions,
@@ -2087,14 +2086,6 @@ export type UiStoreTypes = {
     action(payload: NotifyAndNotShowAgainButtonOption): void;
   };
 
-  SHOW_LOADING_SCREEN: {
-    action(payload: LoadingScreenOption): void;
-  };
-
-  HIDE_ALL_LOADING_SCREEN: {
-    action(): void;
-  };
-
   ON_VUEX_READY: {
     mutation: void;
     action(): void;

src/store/ui.ts

@@ -17,16 +17,13 @@ import {
   MessageDialogOptions,
   ConfirmDialogOptions,
   WarningDialogOptions,
-  LoadingScreenOption,
   NotifyAndNotShowAgainButtonOption,
   connectAndExportTextWithDialog,
   generateAndConnectAndSaveAudioWithDialog,
   generateAndSaveOneAudioWithDialog,
-  hideAllLoadingScreen,
   multiGenerateAndSaveAudioWithDialog,
   showAlertDialog,
   showConfirmDialog,
-  showLoadingScreen,
   showNotifyAndNotShowAgainButton,
   showWarningDialog,
 } from "@/components/Dialog/Dialog";
@@ -229,18 +226,6 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
-  SHOW_LOADING_SCREEN: {
-    action(_, payload: LoadingScreenOption) {
-      showLoadingScreen(payload);
-    },
-  },
-
-  HIDE_ALL_LOADING_SCREEN: {
-    action() {
-      hideAllLoadingScreen();
-    },
-  },
-
   HYDRATE_UI_STORE: {
     async action({ mutations }) {
       mutations.SET_INHERIT_AUDIOINFO({

src/styles/_index.scss

@@ -278,7 +278,7 @@ img {
   font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
+  font-size: 24px; /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;