feat(renderer): Renderer translations

Add react-i18n to make us able to use i18next translations in the
renderer process just like we do in the main process.

Translations are hot-reloaded automatically.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

14 files changed, 303 insertions, 27 deletions

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 81e66d7..4f00a3f 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -14,6 +14,7 @@
     "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.4.3",
     "@sophie/shared": "workspace:*",
+    "i18next": "^21.6.14",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
@@ -21,7 +22,8 @@
     "mobx-react-lite": "^3.3.0",
     "mobx-state-tree": "^5.1.3",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-i18next": "^11.16.2"
   },
   "devDependencies": {
     "@jest/globals": "^27.5.1",
diff --git a/packages/renderer/src/components/Loading.tsx b/packages/renderer/src/components/Loading.tsx
new file mode 100644
index 0000000..019b5ed
--- /dev/null
+++ b/packages/renderer/src/components/Loading.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import CircularProgress from '@mui/material/CircularProgress';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+const LoadingRoot = styled('div')({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export default function Loading() {
+  return (
+    <LoadingRoot>
+      <CircularProgress />
+    </LoadingRoot>
+  );
+}
diff --git a/packages/renderer/src/components/NewWindowBanner.tsx b/packages/renderer/src/components/NewWindowBanner.tsx
index a49b4b1..9aa6121 100644
--- a/packages/renderer/src/components/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/NewWindowBanner.tsx
@@ -23,6 +23,7 @@ import IconOpenInNew from '@mui/icons-material/OpenInNew';
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import type Service from '../stores/Service';
 
@@ -33,6 +34,10 @@ function NewWindowBanner({
 }: {
   service: Service | undefined;
 }): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'banner.newWindow',
+  });
+
   if (service === undefined) {
     // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
     return null;
@@ -63,7 +68,7 @@ function NewWindowBanner({
             color="inherit"
             size="small"
           >
-            Follow link in this window
+            {t('followLink')}
           </Button>
           <Button
             onClick={() => service.openPopupInExternalBrowser(url)}
@@ -71,7 +76,7 @@ function NewWindowBanner({
             size="small"
             startIcon={<IconOpenInBrowser />}
           >
-            Open in browser
+            {t('openInExternalBrowser')}
           </Button>
           {count > 1 && (
             <>
@@ -81,27 +86,29 @@ function NewWindowBanner({
                 size="small"
                 startIcon={<IconOpenInBrowser />}
               >
-                Open all
+                {t('openAllInExternalBrowser')}
               </Button>
               <Button
                 onClick={() => service.dismissPopup(url)}
                 color="inherit"
                 size="small"
               >
-                Ignore
+                {t('dismiss')}
               </Button>
             </>
           )}
         </>
       }
     >
-      {name} wants to open <b>{url}</b>{' '}
       {count === 1 ? (
-        <>in a new window</>
+        <Trans i18nKey="messageSingleLink" t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> in a new window
+        </Trans>
       ) : (
-        <>
-          and <b>{count}</b> other links in new windows
-        </>
+        <Trans i18nKey="messageMultipleLinks" count={count - 1} t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> and{' '}
+          <strong>{{ count: count - 1 }}</strong> other links in new windows
+        </Trans>
       )}
     </NotificationBanner>
   );
diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/NotificationBanner.tsx
index d591e14..36c192a 100644
--- a/packages/renderer/src/components/NotificationBanner.tsx
+++ b/packages/renderer/src/components/NotificationBanner.tsx
@@ -23,6 +23,7 @@ import Alert, { AlertColor } from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
   paddingTop: 7,
@@ -77,11 +78,14 @@ export default function NotificationBanner({
   buttons?: ReactNode;
   children?: ReactNode;
 }): JSX.Element {
+  const { t } = useTranslation();
+
   return (
     <NotificationBannerRoot
       severity={severity ?? 'success'}
       icon={icon ?? false}
       onClose={onClose}
+      closeText={t<string>('banner.close')}
     >
       <NotificationBannerText>{children}</NotificationBannerText>
       {buttons && (
diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index 4eaee29..1755495 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -23,6 +23,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
@@ -31,6 +32,10 @@ function ExtraButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'toolbar',
+  });
+
   return (
     <Box
       sx={{
@@ -39,7 +44,7 @@ function ExtraButtons({
       }}
     >
       <IconButton
-        aria-label="Open in browser"
+        aria-label={t('openInBrowser')}
         disabled={service?.currentUrl === undefined}
         onClick={() => service?.openCurrentURLInExternalBrowser()}
       >
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 9995a21..219ed90 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -28,6 +28,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
@@ -36,6 +37,9 @@ function NavigationButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'toolbar',
+  });
   const { direction } = useTheme();
 
   return (
@@ -46,26 +50,26 @@ function NavigationButtons({
       }}
     >
       <IconButton
-        aria-label="Back"
+        aria-label={t('back')}
         disabled={service === undefined || !service.canGoBack}
         onClick={() => service?.goBack()}
       >
         {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
-        aria-label="Forward"
+        aria-label={t('forward')}
         disabled={service === undefined || !service.canGoForward}
         onClick={() => service?.goForward()}
       >
         {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
       {service?.loading ?? false ? (
-        <IconButton aria-label="Stop" onClick={() => service?.stop()}>
+        <IconButton aria-label={t('stop')} onClick={() => service?.stop()}>
           <IconStop />
         </IconButton>
       ) : (
         <IconButton
-          aria-label="Refresh"
+          aria-label={t('reload')}
           disabled={service === undefined}
           onClick={(event) => service?.reload(event.shiftKey)}
         >
@@ -73,7 +77,7 @@ function NavigationButtons({
         </IconButton>
       )}
       <IconButton
-        aria-label="Home"
+        aria-label={t('home')}
         disabled={service === undefined}
         onClick={() => service?.goHome()}
       >
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index 6e27e6b..d9dff86 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -24,6 +24,7 @@ import IconGlobe from '@mui/icons-material/Public';
 import IconWarning from '@mui/icons-material/Warning';
 import { styled } from '@mui/material/styles';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import LocationInputAdornment from './LocationInputAdornment';
 import getAlertColor from './getAlertColor';
@@ -60,6 +61,10 @@ export default function SecurityLabel({
   changed: boolean;
   position: 'start' | 'end';
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'securityLabel',
+  });
+
   const { type } = splitResult;
   if (changed || type === 'empty') {
     return (
@@ -75,14 +80,14 @@ export default function SecurityLabel({
         <SecurityLabelRoot
           alert={false}
           position={position}
-          aria-label="Secure connection"
+          aria-label={t('secureConnection')}
         >
           <IconHttps fontSize="small" />
         </SecurityLabelRoot>
       ) : (
         <SecurityLabelRoot alert position={position}>
           <IconHttp fontSize="small" />
-          <SecurityLabelText>Not secure</SecurityLabelText>
+          <SecurityLabelText>{t('notSecureConnection')}</SecurityLabelText>
         </SecurityLabelRoot>
       );
     }
@@ -90,7 +95,7 @@ export default function SecurityLabel({
       return (
         <SecurityLabelRoot alert position={position}>
           <IconWarning fontSize="small" />
-          <SecurityLabelText>Unknown site</SecurityLabelText>
+          <SecurityLabelText>{t('unknownSite')}</SecurityLabelText>
         </SecurityLabelRoot>
       );
     default:
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index b8f9b96..1017be9 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -129,7 +129,9 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
         }}
       >
         <ServiceIconRoot hasError={hasError}>
-          <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
+          <ServiceIconText aria-hidden="true">
+            {name.length > 0 ? name[0] : '?'}
+          </ServiceIconText>
         </ServiceIconRoot>
       </ServiceIconBadge>
     </ServiceIconErrorBadge>
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 404149b..010c716 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -21,9 +21,12 @@
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { alpha, styled } from '@mui/material/styles';
+import type { TFunction } from 'i18next';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
+import type Service from '../../stores/Service';
 import { useStore } from '../StoreProvider';
 
 import ServiceIcon from './ServiceIcon';
@@ -63,7 +66,36 @@ const ServiceSwitcherTab = styled(Tab, {
   },
 }));
 
+function getServiceTitle(service: Service, t: TFunction) {
+  const {
+    settings: { name },
+    directMessageCount,
+    indirectMessageCount,
+  } = service;
+  let messagesText: string | undefined;
+  if (indirectMessageCount > 0) {
+    messagesText =
+      directMessageCount > 0
+        ? t('service.title.directAndIndirectMessageCount', {
+            directMessageCount,
+            indirectMessageCount,
+          })
+        : t('service.title.indirectMessageCount', {
+            count: indirectMessageCount,
+          });
+  } else if (directMessageCount > 0) {
+    messagesText = t('service.title.directMessageCount', {
+      count: directMessageCount,
+    });
+  }
+  if (messagesText === undefined) {
+    return t('service.title.nameWithNoMessages', { name });
+  }
+  return t('service.title.nameWithMessages', { name, messages: messagesText });
+}
+
 function ServiceSwitcher(): JSX.Element {
+  const { t } = useTranslation();
   const { settings, services } = useStore();
   const { selectedService } = settings;
 
@@ -81,7 +113,7 @@ function ServiceSwitcher(): JSX.Element {
           key={service.id}
           value={service.id}
           icon={<ServiceIcon service={service} />}
-          aria-label={service.settings.name}
+          aria-label={getServiceTitle(service, t)}
         />
       ))}
     </ServiceSwitcherRoot>
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index bacbf07..51c3b18 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -23,16 +23,18 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useStore } from '../StoreProvider';
 
 export default observer(() => {
+  const { t } = useTranslation();
   const { shared } = useStore();
   const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
-      aria-label="Toggle dark mode"
+      aria-label={t('toolbar.toggleDarkMode')}
       onClick={() => shared.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 57b17e9..325160e 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -25,6 +25,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useStore } from '../StoreProvider';
 import { LOCATION_BAR_ID } from '../locationBar/LocationBar';
@@ -45,6 +46,7 @@ function ToggleLocationBarIcon({
 }
 
 function ToggleLocationBarButton(): JSX.Element {
+  const { t } = useTranslation();
   const { settings } = useStore();
   const { selectedService, showLocationBar } = settings;
 
@@ -52,7 +54,7 @@ function ToggleLocationBarButton(): JSX.Element {
     <IconButton
       aria-pressed={showLocationBar}
       aria-controls={LOCATION_BAR_ID}
-      aria-label="Show location bar"
+      aria-label={t('toolbar.toggleLocationBar')}
       onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
diff --git a/packages/renderer/src/i18n/RendererIpcI18nBackend.ts b/packages/renderer/src/i18n/RendererIpcI18nBackend.ts
new file mode 100644
index 0000000..13e03b5
--- /dev/null
+++ b/packages/renderer/src/i18n/RendererIpcI18nBackend.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { SophieRenderer } from '@sophie/shared';
+import type { BackendModule, ReadCallback } from 'i18next';
+
+export default class RendererIpcI18nBackend implements BackendModule<unknown> {
+  type = 'backend' as const;
+
+  constructor(
+    private readonly ipc: SophieRenderer,
+    private readonly devMode = false,
+  ) {}
+
+  // eslint-disable-next-line class-methods-use-this -- Method required by interface.
+  init() {}
+
+  read(language: string, namespace: string, callback: ReadCallback): void {
+    const readAsync = async () => {
+      const translations = await this.ipc.getTranslation({
+        language,
+        namespace,
+      });
+      // eslint-disable-next-line unicorn/no-null -- `i18next` API requires `null`.
+      setTimeout(() => callback(null, translations), 0);
+    };
+
+    readAsync().catch((error) => {
+      const callbackError =
+        error instanceof Error
+          ? error
+          : new Error(`Unknown error: ${JSON.stringify(error)}`);
+      /*
+        eslint-disable-next-line promise/no-callback-in-promise, unicorn/no-null --
+        Converting from promise based API to a callback. `i18next` API requires `null`.
+      */
+      setTimeout(() => callback(callbackError, null), 0);
+    });
+  }
+
+  create(
+    languages: string[],
+    namespace: string,
+    key: string,
+    fallbackValue: string,
+  ): void {
+    if (!this.devMode) {
+      throw new Error('Refusing to add missing translation in production mode');
+    }
+    this.ipc.dispatchAction({
+      action: 'add-missing-translation',
+      languages,
+      namespace,
+      key,
+      value: fallbackValue,
+    });
+  }
+}
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
new file mode 100644
index 0000000..19d1e2d
--- /dev/null
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { fallbackLng, SophieRenderer } from '@sophie/shared';
+import i18next from 'i18next';
+import { autorun } from 'mobx';
+import { addDisposer } from 'mobx-state-tree';
+import { initReactI18next } from 'react-i18next';
+
+import RendererStore from '../stores/RendererStore';
+import { getLogger } from '../utils/log';
+
+import RendererIpcI18nBackend from './RendererIpcI18nBackend';
+
+const log = getLogger('loadRendererLocalization');
+
+export default function loadRendererLocalization(
+  store: RendererStore,
+  ipc: SophieRenderer,
+  devMode: boolean,
+): void {
+  const loadAsync = async () => {
+    const i18n = i18next
+      .createInstance({
+        lng: store.shared.language,
+        fallbackLng,
+        interpolation: {
+          escapeValue: false, // Not needed for react
+        },
+        debug: devMode,
+        saveMissing: devMode,
+      })
+      .use(new RendererIpcI18nBackend(ipc, devMode))
+      .use(initReactI18next);
+
+    if (devMode) {
+      const reloadTranslationsAsync = async () => {
+        await i18n.reloadResources();
+        if (i18n.isInitialized) {
+          // Spuriously change language to re-trigger `useTranslation` hooks.
+          await i18n.changeLanguage(store.shared.language);
+        }
+        log.info('Reloaded translations');
+      };
+
+      ipc.onReloadTranslations(() => {
+        reloadTranslationsAsync().catch((error) => {
+          log.error('Failed to reload translations', error);
+        });
+      });
+    }
+
+    await i18n.init();
+    const disposeChangeLanguage = autorun(() => {
+      const {
+        shared: { language },
+      } = store;
+      if (i18n.language !== language) {
+        i18n.changeLanguage(language).catch((error) => {
+          log.error('Failed to change language', error);
+        });
+      }
+    });
+    addDisposer(store, disposeChangeLanguage);
+  };
+
+  loadAsync().catch((error) => {
+    log.error('Failed to connect to load localization', error);
+  });
+}
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';
 import '@fontsource/roboto/700.css';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autorun } from 'mobx';
-import React from 'react';
+import { addDisposer } from 'mobx-state-tree';
+import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 
 import App from './components/App';
+import Loading from './components/Loading';
 import StoreProvider from './components/StoreProvider';
 import ThemeProvider from './components/ThemeProvider';
 import { exposeToReduxDevtools, hotReload } from './devTools';
+import loadRendererLocalization from './i18n/loadRendererLoalization';
 import { createAndConnectRendererStore } from './stores/RendererStore';
 import { getLogger } from './utils/log';
 
@@ -42,7 +45,9 @@ if (isDevelopment) {
   hotReload();
 }
 
-const store = createAndConnectRendererStore(window.sophieRenderer);
+const { sophieRenderer: ipc } = window;
+
+const store = createAndConnectRendererStore(ipc);
 
 if (isDevelopment) {
   exposeToReduxDevtools(store).catch((error) => {
@@ -50,13 +55,16 @@ if (isDevelopment) {
   });
 }
 
-autorun(() => {
+loadRendererLocalization(store, ipc, isDevelopment);
+
+const disposeSetTitle = autorun(() => {
   const titlePrefix = isDevelopment ? '[dev] ' : '';
   const serviceTitle = store.settings.selectedService?.title;
   const formattedServiceTitle =
     serviceTitle === undefined ? '' : `${serviceTitle} - `;
   document.title = `${titlePrefix}${formattedServiceTitle}Sophie`;
 });
+addDisposer(store, disposeSetTitle);
 
 function Root(): JSX.Element {
   return (
@@ -64,7 +72,9 @@ function Root(): JSX.Element {
       <StoreProvider store={store}>
         <ThemeProvider>
           <CssBaseline enableColorScheme />
-          <App />
+          <Suspense fallback={<Loading />}>
+            <App />
+          </Suspense>
         </ThemeProvider>
       </StoreProvider>
     </React.StrictMode>