decouple default component from react root (#2897)

Decouple default component from react root

Author: blessedcoolant

invokeai/frontend/web/src/component.tsx

@@ -0,0 +1,38 @@
+import React, { lazy } from 'react';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { store } from './app/store';
+import { persistor } from './persistor';
+import '@fontsource/inter/100.css';
+import '@fontsource/inter/200.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/800.css';
+import '@fontsource/inter/900.css';
+
+import Loading from './Loading';
+
+// Localization
+import './i18n';
+
+const App = lazy(() => import('./app/App'));
+const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
+
+export default function Component() {
+  return (
+    <React.StrictMode>
+      <Provider store={store}>
+        <PersistGate loading={<Loading />} persistor={persistor}>
+          <React.Suspense fallback={<Loading showText />}>
+            <ThemeLocaleProvider>
+              <App />
+            </ThemeLocaleProvider>
+          </React.Suspense>
+        </PersistGate>
+      </Provider>
+    </React.StrictMode>
+  );
+}

invokeai/frontend/web/src/main.tsx

@@ -1,37 +1,7 @@
-import React, { lazy } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
-import { store } from './app/store';
-import { persistor } from './persistor';
-import '@fontsource/inter/100.css';
-import '@fontsource/inter/200.css';
-import '@fontsource/inter/300.css';
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/500.css';
-import '@fontsource/inter/600.css';
-import '@fontsource/inter/700.css';
-import '@fontsource/inter/800.css';
-import '@fontsource/inter/900.css';
 
-import Loading from './Loading';
-
-// Localization
-import './i18n';
-
-const App = lazy(() => import('./app/App'));
-const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
+import Component from './component';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <PersistGate loading={<Loading />} persistor={persistor}>
-        <React.Suspense fallback={<Loading showText />}>
-          <ThemeLocaleProvider>
-            <App />
-          </ThemeLocaleProvider>
-        </React.Suspense>
-      </PersistGate>
-    </Provider>
-  </React.StrictMode>
+  <Component />
 );