cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-28 10:29:11 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

lazy load routes

Browse Source
This commit is contained in:
cv
2021-04-25 23:57:32 +02:00
parent ce76c8c0fd
commit 116708726b
1 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+23 -20
View File
@@ -1,29 +1,30 @@
import { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom'; import { Route } from 'react-router-dom';
import './App.css'; import './App.css';
import Editor from './features/editors/Editor';
import DefaultPresenter from './features/viewers/DefaultPresenter';
import PresenterView from './features/viewers/presenter/PresenterView';
import { QueryClient, QueryClientProvider } from 'react-query'; import { QueryClient, QueryClientProvider } from 'react-query';
import { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental';
// import { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental';
import SocketProvider from './app/context/socketContext'; import SocketProvider from './app/context/socketContext';
import PresenterSimple from './features/viewers/presenter/PresenterSimple';
import StageManager from './features/viewers/backstage/StageManager';
import withSocket from './features/viewers/ViewWrapper'; import withSocket from './features/viewers/ViewWrapper';
import Lower from './features/viewers/lower/Lower'; import { ReactQueryDevtools } from 'react-query/devtools';
const Editor = lazy(() => import('./features/editors/Editor'));
const PresenterView = lazy(() =>
import('./features/viewers/presenter/PresenterView')
);
const PresenterSimple = lazy(() =>
import('./features/viewers/presenter/PresenterSimple')
);
const StageManager = lazy(() =>
import('./features/viewers/backstage/StageManager')
);
const Lower = lazy(() => import('./features/viewers/lower/Lower'));
const queryClient = new QueryClient(); const queryClient = new QueryClient();
broadcastQueryClient({
queryClient,
broadcastChannel: 'ontime',
});
// Seemed to cause issues // Seemed to cause issues
// broadcastQueryClient({ // broadcastQueryClient({
// queryClient, // queryClient,
// broadcastChannel: 'ontime', // broadcastChannel: 'ontime',
// }); // });
const SDefault = withSocket(DefaultPresenter);
const SSpeaker = withSocket(PresenterView); const SSpeaker = withSocket(PresenterView);
const SSpeakerSimple = withSocket(PresenterSimple); const SSpeakerSimple = withSocket(PresenterSimple);
const SStageManager = withSocket(StageManager); const SStageManager = withSocket(StageManager);
@@ -34,13 +35,15 @@ function App() {
<SocketProvider> <SocketProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<div className='App'> <div className='App'>
<Route exact path='/' component={PresenterView} /> <Suspense fallback={<div>Loading...</div>}>
<Route exact path='/' component={SSpeaker} /> <Route exact path='/' component={SSpeaker} />
<Route exact path='/sm' component={SStageManager} /> <Route exact path='/sm' component={SStageManager} />
<Route exact path='/speaker' component={SSpeaker} /> <Route exact path='/speaker' component={SSpeaker} />
<Route exact path='/speakersimple' component={SSpeakerSimple} /> <Route exact path='/speakersimple' component={SSpeakerSimple} />
<Route exact path='/editor' component={Editor} /> <Route exact path='/editor' component={Editor} />
<Route path='/lower' component={SLowerThird} /> <Route path='/lower' component={SLowerThird} />
{/* <ReactQueryDevtools initialIsOpen={false} /> */}
</Suspense>
</div> </div>
</QueryClientProvider> </QueryClientProvider>
</SocketProvider> </SocketProvider>