feat: lazy load playground (#1145)

* feat: lazy load playground

* fix: app.tsx

* fix: add suspense

* fix: update snapshot

frontend/src/component/App.tsx

@@ -14,6 +14,7 @@ import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPa
 import { useStyles } from './App.styles';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { Suspense } from 'react';
 
 export const App = () => {
     const { classes: styles } = useStyles();
@@ -30,37 +31,39 @@ export const App = () => {
 
     return (
         <SWRProvider isUnauthorized={!isLoggedIn}>
-            <ConditionallyRender
+            <Suspense fallback={<Loader />}>
-                condition={!hasFetchedAuth}
+                <ConditionallyRender
-                show={<Loader />}
+                    condition={!hasFetchedAuth}
-                elseShow={
+                    show={<Loader />}
-                    <div className={styles.container}>
+                    elseShow={
-                        <ToastRenderer />
+                        <div className={styles.container}>
-                        <LayoutPicker>
+                            <ToastRenderer />
-                            <Routes>
+                            <LayoutPicker>
-                                {availableRoutes.map(route => (
+                                <Routes>
+                                    {availableRoutes.map(route => (
+                                        <Route
+                                            key={route.path}
+                                            path={route.path}
+                                            element={
+                                                <ProtectedRoute route={route} />
+                                            }
+                                        />
+                                    ))}
                                     <Route
-                                        key={route.path}
+                                        path="/"
-                                        path={route.path}
                                         element={
-                                            <ProtectedRoute route={route} />
+                                            <Navigate to="/features" replace />
                                         }
                                     />
-                                ))}
+                                    <Route path="*" element={<NotFound />} />
-                                <Route
+                                </Routes>
-                                    path="/"
+                                <FeedbackNPS openUrl="http://feedback.unleash.run" />
-                                    element={
+                                <SplashPageRedirect />
-                                        <Navigate to="/features" replace />
+                            </LayoutPicker>
-                                    }
+                        </div>
-                                />
+                    }
-                                <Route path="*" element={<NotFound />} />
+                />
-                            </Routes>
+            </Suspense>
-                            <FeedbackNPS openUrl="http://feedback.unleash.run" />
-                            <SplashPageRedirect />
-                        </LayoutPicker>
-                    </div>
-                }
-            />
         </SWRProvider>
     );
 };

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -120,7 +120,14 @@ exports[`returns all baseRoutes 1`] = `
     "type": "protected",
   },
   {
-    "component": [Function],
+    "component": {
+      "$$typeof": Symbol(react.lazy),
+      "_init": [Function],
+      "_payload": {
+        "_result": [Function],
+        "_status": -1,
+      },
+    },
     "hidden": false,
     "menu": {
       "mobile": true,

frontend/src/component/menu/routes.ts

@@ -53,10 +53,10 @@ import { SegmentTable } from 'component/segments/SegmentTable/SegmentTable';
 import FlaggedBillingRedirect from 'component/admin/billing/FlaggedBillingRedirect/FlaggedBillingRedirect';
 import { FeaturesArchiveTable } from '../archive/FeaturesArchiveTable';
 import { Billing } from 'component/admin/billing/Billing';
-import { Playground } from 'component/playground/Playground/Playground';
 import { Group } from 'component/admin/groups/Group/Group';
 import { CreateGroup } from 'component/admin/groups/CreateGroup/CreateGroup';
 import { EditGroup } from 'component/admin/groups/EditGroup/EditGroup';
+import { LazyPlayground } from 'component/playground/Playground/LazyPlayground';
 
 export const routes: IRoute[] = [
     // Splash
@@ -182,7 +182,7 @@ export const routes: IRoute[] = [
     {
         path: '/playground',
         title: 'Playground',
-        component: Playground,
+        component: LazyPlayground,
         hidden: false,
         type: 'protected',
         menu: { mobile: true },

frontend/src/component/playground/Playground/LazyPlayground.tsx

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const LazyPlayground = lazy(() => import('./Playground'));

frontend/src/component/playground/Playground/Playground.tsx

@@ -212,3 +212,5 @@ export const Playground: VFC<{}> = () => {
         </PageContent>
     );
 };
+
+export default Playground;