1 files changed, 44 insertions, 20 deletions

diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index a42a30c..f1e8542 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -18,31 +18,32 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
 import CssBaseline from '@mui/material/CssBaseline';
-import React from 'react';
-import { render } from 'react-dom';
+import { autorun } from 'mobx';
+import { addDisposer } from 'mobx-state-tree';
+import React, { Suspense, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
 
-import App from './components/App';
-import StoreProvider from './components/StoreProvider';
-import ThemeProvider from './components/ThemeProvider';
-import { exposeToReduxDevtools, hotReloadServices } from './devTools';
-import { createAndConnectRendererStore } from './stores/RendererStore';
-import { getLogger } from './utils/log';
+import Loading from './components/Loading.js';
+import ThemeProvider from './components/ThemeProvider.js';
+import { exposeToReduxDevtools, hotReload } from './devTools.js';
+import RtlCacheProvider from './i18n/RtlCacheProvider.js';
+import createRtlCache from './i18n/createRtlCache.js';
+import loadRendererLocalization from './i18n/loadRendererLoalization.js';
+import { createAndConnectRendererStore } from './stores/RendererStore.js';
+import { getLogger } from './utils/log.js';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
 const log = getLogger('index');
 
 if (isDevelopment) {
-  hotReloadServices();
-  document.title = `[dev] ${document.title}`;
+  hotReload();
 }
 
-const store = createAndConnectRendererStore(window.sophieRenderer);
+const { sophieRenderer: ipc } = window;
+
+const store = await createAndConnectRendererStore(ipc);
 
 if (isDevelopment) {
   exposeToReduxDevtools(store).catch((error) => {
@@ -50,17 +51,40 @@ if (isDevelopment) {
   });
 }
 
+loadRendererLocalization(store, ipc, isDevelopment);
+
+const disposeSetHtmlLang = autorun(() => {
+  const {
+    shared: { language, writingDirection },
+  } = store;
+  document.documentElement.lang = language;
+  document.documentElement.dir = writingDirection;
+});
+addDisposer(store, disposeSetHtmlLang);
+
+const rtlCache = createRtlCache();
+
+const App = lazy(() => import('./components/App.js'));
+
 function Root(): JSX.Element {
   return (
     <React.StrictMode>
-      <StoreProvider store={store}>
-        <ThemeProvider>
+      <RtlCacheProvider store={store} rtlCache={rtlCache}>
+        <ThemeProvider store={store}>
           <CssBaseline enableColorScheme />
-          <App />
+          <Suspense fallback={<Loading />}>
+            <App store={store} devMode={isDevelopment} />
+          </Suspense>
         </ThemeProvider>
-      </StoreProvider>
+      </RtlCacheProvider>
     </React.StrictMode>
   );
 }
 
-render(<Root />, document.querySelector('#app'));
+const rootElement = document.querySelector('#app');
+if (rootElement === null) {
+  log.error('Root element not found');
+} else {
+  const root = createRoot(rootElement);
+  root.render(<Root />);
+}