👁️ Add suspense for viewer layout (#4624)

* Add suspense for viewer layout * Fix suspense * Build fix --------- Co-authored-by: attemka <[email protected]>
Joystream · Aug 16, 2023 · 47720b7 · 47720b7
1 parent ccdc6fa
commit 47720b7
Showing 1 changed file with 37 additions and 24 deletions.
diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx
@@ -1,11 +1,12 @@
 import styled from '@emotion/styled'
-import lazy from '@loadable/component'
 import { ErrorBoundary } from '@sentry/react'
-import { FC, useEffect, useRef } from 'react'
+import { FC, Suspense, lazy, useEffect, useRef } from 'react'
 import { Route, Routes, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
 import { ViewErrorBoundary } from '@/components/ViewErrorFallback'
+import { Spinner } from '@/components/_loaders/Spinner'
+import { LoadingStudioContainer } from '@/components/_loaders/StudioLoading'
 import { BottomNav } from '@/components/_navigation/BottomNav'
 import { PrivateRoute } from '@/components/_navigation/PrivateRoute'
 import { SidenavViewer } from '@/components/_navigation/SidenavViewer'
@@ -146,28 +147,40 @@ export const ViewerLayout: FC = () => {
               classNames={transitions.names.fadeAndSlide}
               key={displayedLocation.pathname}
             >
-              <Routes location={displayedLocation}>
-                {viewerRoutes.map((route) => (
-                  <Route key={route.path} {...route} />
-                ))}
-                <Route
-                  path={relativeRoutes.viewer.memberSettings()}
-                  element={
-                    <PrivateRoute
-                      isAuth={isLoggedIn}
-                      element={<MembershipSettingsView />}
-                      redirectTo={ENTRY_POINT_ROUTE}
-                    />
-                  }
-                />
-                <Route
-                  path={absoluteRoutes.viewer.notifications()}
-                  element={
-                    <PrivateRoute isAuth={isLoggedIn} element={<NotificationsView />} redirectTo={ENTRY_POINT_ROUTE} />
-                  }
-                />
-                <Route path="*" element={<NotFoundView />} />
-              </Routes>
+              <Suspense
+                fallback={
+                  <LoadingStudioContainer>
+                    <Spinner size="large" />
+                  </LoadingStudioContainer>
+                }
+              >
+                <Routes location={displayedLocation}>
+                  {viewerRoutes.map((route) => (
+                    <Route key={route.path} {...route} />
+                  ))}
+                  <Route
+                    path={relativeRoutes.viewer.memberSettings()}
+                    element={
+                      <PrivateRoute
+                        isAuth={isLoggedIn}
+                        element={<MembershipSettingsView />}
+                        redirectTo={ENTRY_POINT_ROUTE}
+                      />
+                    }
+                  />
+                  <Route
+                    path={absoluteRoutes.viewer.notifications()}
+                    element={
+                      <PrivateRoute
+                        isAuth={isLoggedIn}
+                        element={<NotificationsView />}
+                        redirectTo={ENTRY_POINT_ROUTE}
+                      />
+                    }
+                  />
+                  <Route path="*" element={<NotFoundView />} />
+                </Routes>
+              </Suspense>
             </CSSTransition>
           </SwitchTransition>
         </ErrorBoundary>