From 116708726bdf30a28dd13c03fc35c912dea031c0 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 25 Apr 2021 23:57:32 +0200
Subject: [PATCH] lazy load routes

---
 client/src/App.jsx | 43 +++++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index be05a783d..18ac6895d 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,29 +1,30 @@
+import { lazy, Suspense } from 'react';
 import { Route } from 'react-router-dom';
 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 { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental';
-// import { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental';
 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 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();
-broadcastQueryClient({
-  queryClient,
-  broadcastChannel: 'ontime',
-});
 // Seemed to cause issues
 // broadcastQueryClient({
 //   queryClient,
 //   broadcastChannel: 'ontime',
 // });
 
-const SDefault = withSocket(DefaultPresenter);
 const SSpeaker = withSocket(PresenterView);
 const SSpeakerSimple = withSocket(PresenterSimple);
 const SStageManager = withSocket(StageManager);
@@ -34,13 +35,15 @@ function App() {
     <SocketProvider>
       <QueryClientProvider client={queryClient}>
         <div className='App'>
-          <Route exact path='/' component={PresenterView} />
-          <Route exact path='/' component={SSpeaker} />
-          <Route exact path='/sm' component={SStageManager} />
-          <Route exact path='/speaker' component={SSpeaker} />
-          <Route exact path='/speakersimple' component={SSpeakerSimple} />
-          <Route exact path='/editor' component={Editor} />
-          <Route path='/lower' component={SLowerThird} />
+          <Suspense fallback={<div>Loading...</div>}>
+            <Route exact path='/' component={SSpeaker} />
+            <Route exact path='/sm' component={SStageManager} />
+            <Route exact path='/speaker' component={SSpeaker} />
+            <Route exact path='/speakersimple' component={SSpeakerSimple} />
+            <Route exact path='/editor' component={Editor} />
+            <Route path='/lower' component={SLowerThird} />
+            {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+          </Suspense>
         </div>
       </QueryClientProvider>
     </SocketProvider>