fix: double render in studio mode

src/components/app-loader.tsx

@@ -0,0 +1,21 @@
+import { lazy, Suspense } from 'react';
+import '../i18n';
+import '../index.css';
+import { DocumentEditorDebugTools } from '../utils/document-editor-debug-tools';
+import serviceWorkerManager from '../utils/registerServiceWorker';
+
+if (import.meta.env.MODE === 'development') {
+    window.documentEditorDebugTools = new DocumentEditorDebugTools();
+} else {
+    serviceWorkerManager.registerServiceWorker(false);
+}
+
+const App = lazy(() => import('./app'));
+
+const AppLoader = (
+    <Suspense>
+        <App />
+    </Suspense>
+);
+
+export default AppLoader;

src/components/app.tsx

@@ -26,7 +26,7 @@ const Preloader = () => {
     return null;
 };
 
-export default (
+const App = () => (
     <React.StrictMode>
         <Suspense fallback={<>{/* TODO loading */}</>}>
             <Provider store={atomStore}>
@@ -49,3 +49,5 @@ export default (
         </Suspense>
     </React.StrictMode>
 );
+
+export default App;

src/index.ts

@@ -0,0 +1,13 @@
+import { createRoot } from 'react-dom/client';
+
+async function renderApp(element: HTMLElement) {
+    const AppLoader = await import('./components/app-loader');
+    createRoot(element).render(AppLoader.default);
+}
+
+const AppElement = document.getElementById('app');
+if (!AppElement) {
+    throw new Error('#app element not found!');
+}
+
+renderApp(AppElement).catch(console.error);

src/renderer.ts

@@ -25,22 +25,6 @@
  *  });
  * ```
  */
-import { createRoot } from 'react-dom/client';
-import App from './components/app';
-import './i18n';
-import './index.css';
-import { DocumentEditorDebugTools } from './utils/document-editor-debug-tools';
-import serviceWorkerManager from './utils/registerServiceWorker';
 
-const AppElement = document.getElementById('app');
-if (!AppElement) {
-    throw new Error('#app element not found!');
-}
-
-if (import.meta.env.MODE === 'development') {
-    window.documentEditorDebugTools = new DocumentEditorDebugTools();
-} else {
-    serviceWorkerManager.registerServiceWorker(false);
-}
-
-createRoot(AppElement).render(App);
+// splits app code into separate chunk to avoid circular dependencies
+import('./index');