diff options
Diffstat (limited to 'packages/renderer/src/index.tsx')
-rw-r--r-- | packages/renderer/src/index.tsx | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx index 54e157c..0022ec8 100644 --- a/packages/renderer/src/index.tsx +++ b/packages/renderer/src/index.tsx | |||
@@ -24,13 +24,16 @@ import '@fontsource/roboto/500.css'; | |||
24 | import '@fontsource/roboto/700.css'; | 24 | import '@fontsource/roboto/700.css'; |
25 | import CssBaseline from '@mui/material/CssBaseline'; | 25 | import CssBaseline from '@mui/material/CssBaseline'; |
26 | import { autorun } from 'mobx'; | 26 | import { autorun } from 'mobx'; |
27 | import React from 'react'; | 27 | import { addDisposer } from 'mobx-state-tree'; |
28 | import React, { Suspense } from 'react'; | ||
28 | import { render } from 'react-dom'; | 29 | import { render } from 'react-dom'; |
29 | 30 | ||
30 | import App from './components/App'; | 31 | import App from './components/App'; |
32 | import Loading from './components/Loading'; | ||
31 | import StoreProvider from './components/StoreProvider'; | 33 | import StoreProvider from './components/StoreProvider'; |
32 | import ThemeProvider from './components/ThemeProvider'; | 34 | import ThemeProvider from './components/ThemeProvider'; |
33 | import { exposeToReduxDevtools, hotReload } from './devTools'; | 35 | import { exposeToReduxDevtools, hotReload } from './devTools'; |
36 | import loadRendererLocalization from './i18n/loadRendererLoalization'; | ||
34 | import { createAndConnectRendererStore } from './stores/RendererStore'; | 37 | import { createAndConnectRendererStore } from './stores/RendererStore'; |
35 | import { getLogger } from './utils/log'; | 38 | import { getLogger } from './utils/log'; |
36 | 39 | ||
@@ -42,7 +45,9 @@ if (isDevelopment) { | |||
42 | hotReload(); | 45 | hotReload(); |
43 | } | 46 | } |
44 | 47 | ||
45 | const store = createAndConnectRendererStore(window.sophieRenderer); | 48 | const { sophieRenderer: ipc } = window; |
49 | |||
50 | const store = createAndConnectRendererStore(ipc); | ||
46 | 51 | ||
47 | if (isDevelopment) { | 52 | if (isDevelopment) { |
48 | exposeToReduxDevtools(store).catch((error) => { | 53 | exposeToReduxDevtools(store).catch((error) => { |
@@ -50,13 +55,16 @@ if (isDevelopment) { | |||
50 | }); | 55 | }); |
51 | } | 56 | } |
52 | 57 | ||
53 | autorun(() => { | 58 | loadRendererLocalization(store, ipc, isDevelopment); |
59 | |||
60 | const disposeSetTitle = autorun(() => { | ||
54 | const titlePrefix = isDevelopment ? '[dev] ' : ''; | 61 | const titlePrefix = isDevelopment ? '[dev] ' : ''; |
55 | const serviceTitle = store.settings.selectedService?.title; | 62 | const serviceTitle = store.settings.selectedService?.title; |
56 | const formattedServiceTitle = | 63 | const formattedServiceTitle = |
57 | serviceTitle === undefined ? '' : `${serviceTitle} - `; | 64 | serviceTitle === undefined ? '' : `${serviceTitle} - `; |
58 | document.title = `${titlePrefix}${formattedServiceTitle}Sophie`; | 65 | document.title = `${titlePrefix}${formattedServiceTitle}Sophie`; |
59 | }); | 66 | }); |
67 | addDisposer(store, disposeSetTitle); | ||
60 | 68 | ||
61 | function Root(): JSX.Element { | 69 | function Root(): JSX.Element { |
62 | return ( | 70 | return ( |
@@ -64,7 +72,9 @@ function Root(): JSX.Element { | |||
64 | <StoreProvider store={store}> | 72 | <StoreProvider store={store}> |
65 | <ThemeProvider> | 73 | <ThemeProvider> |
66 | <CssBaseline enableColorScheme /> | 74 | <CssBaseline enableColorScheme /> |
67 | <App /> | 75 | <Suspense fallback={<Loading />}> |
76 | <App /> | ||
77 | </Suspense> | ||
68 | </ThemeProvider> | 78 | </ThemeProvider> |
69 | </StoreProvider> | 79 | </StoreProvider> |
70 | </React.StrictMode> | 80 | </React.StrictMode> |