Merge pull request #294 from ryohey/loading

Add loading dialog

src/common/localize/localization.ts

@@ -148,6 +148,8 @@ export default {
     remove: "削除",
     "initialize-error": "起動時の処理でエラーが発生しました",
     "soundfont-save-notice": "サウンドフォントはブラウザー内に保存されます",
+    "loading-external-midi": "外部のMIDIファイルを読み込み中...",
+    initializing: "起動中...",
     /* MIDI Instrument Categories */
     Piano: "ピアノ",
     "Chromatic Percussion": "クロマチック",

src/main/components/LoadingDialog/LoadingDialog.tsx

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled"
+import { observer } from "mobx-react-lite"
+import { FC } from "react"
+import { CircularProgress } from "../../../components/CircularProgress"
+import { Dialog, DialogContent } from "../../../components/Dialog"
+import { useStores } from "../../hooks/useStores"
+
+const Message = styled.div`
+  color: ${({ theme }) => theme.textColor};
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+`
+
+export const LoadingDialog: FC = observer(() => {
+  const rootStore = useStores()
+  const { rootViewStore } = rootStore
+  const { openLoadingDialog: open, loadingDialogMessage } = rootViewStore
+
+  return (
+    <Dialog open={open} style={{ minWidth: "20rem" }}>
+      <DialogContent style={{ display: "flex", marginBottom: "0" }}>
+        <CircularProgress />
+        <Message>{loadingDialogMessage ?? "Loading..."}</Message>
+      </DialogContent>
+    </Dialog>
+  )
+})

src/main/components/RootView/RootView.tsx

@@ -11,6 +11,7 @@ import { ExportProgressDialog } from "../ExportDialog/ExportProgressDialog"
 import { Head } from "../Head/Head"
 import { HelpDialog } from "../Help/HelpDialog"
 import { InitializeErrorDialog } from "../InitializeErrorDialog/InitializeErrorDialog"
+import { LoadingDialog } from "../LoadingDialog/LoadingDialog"
 import { Navigation } from "../Navigation/Navigation"
 import { OnBeforeUnload } from "../OnBeforeUnload/OnBeforeUnload"
 import { PianoRollEditor } from "../PianoRoll/PianoRollEditor"
@@ -70,5 +71,6 @@ export const RootView: FC = () => (
     <ControlSettingDialog />
     <InitializeErrorDialog />
     <OnBeforeUnload />
+    <LoadingDialog />
   </>
 )

src/main/stores/RootStore.ts

@@ -1,4 +1,5 @@
 import { makeObservable, observable } from "mobx"
+import { localized } from "../../common/localize/localizedString"
 import Player from "../../common/player"
 import Song, { emptySong } from "../../common/song"
 import TrackMute from "../../common/trackMute"
@@ -87,13 +88,20 @@ export default class RootStore {
 
   private async init() {
     try {
+      this.rootViewStore.openLoadingDialog = true
+      this.rootViewStore.loadingDialogMessage = localized(
+        "initializing",
+        "Initializing...",
+      )
       await this.synth.setup()
       await this.soundFontStore.init()
       this.setupMetronomeSynth()
       await this.loadExternalMidiOnLaunchIfNeeded()
     } catch (e) {
       this.rootViewStore.initializeError = e as Error
       this.rootViewStore.openInitializeErrorDialog = true
+    } finally {
+      this.rootViewStore.openLoadingDialog = false
     }
   }
 
@@ -102,6 +110,9 @@ export default class RootStore {
     const openParam = params.get("open")
 
     if (openParam) {
+      this.rootViewStore.loadingDialogMessage =
+        localized("loading-external-midi", "Loading external midi file...") ??
+        null
       const song = await loadSongFromExternalMidiFile(openParam)
       setSong(this)(song)
     }

src/main/stores/RootViewStore.ts

@@ -12,6 +12,8 @@ export default class RootViewStore {
   openControlSettingDialog = false
   initializeError: Error | null = null
   openInitializeErrorDialog = false
+  openLoadingDialog = false
+  loadingDialogMessage: string | null = ""
 
   constructor() {
     makeObservable(this, {
@@ -25,6 +27,8 @@ export default class RootViewStore {
       openControlSettingDialog: observable,
       initializeError: observable,
       openInitializeErrorDialog: observable,
+      openLoadingDialog: observable,
+      loadingDialogMessage: observable,
     })
   }
 }