mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
decouple default component from react root
This commit is contained in:
parent
8762069b37
commit
816ea39827
38
invokeai/frontend/web/src/component.tsx
Normal file
38
invokeai/frontend/web/src/component.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -1,37 +1,7 @@
|
|||||||
import React, { lazy } from 'react';
|
|
||||||
import ReactDOM from 'react-dom/client';
|
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';
|
import Component from './component';
|
||||||
|
|
||||||
// Localization
|
|
||||||
import './i18n';
|
|
||||||
|
|
||||||
const App = lazy(() => import('./app/App'));
|
|
||||||
const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||||
<React.StrictMode>
|
<Component />
|
||||||
<Provider store={store}>
|
|
||||||
<PersistGate loading={<Loading />} persistor={persistor}>
|
|
||||||
<React.Suspense fallback={<Loading showText />}>
|
|
||||||
<ThemeLocaleProvider>
|
|
||||||
<App />
|
|
||||||
</ThemeLocaleProvider>
|
|
||||||
</React.Suspense>
|
|
||||||
</PersistGate>
|
|
||||||
</Provider>
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user