From d4f46eaf2e87a1d8cd8cf6bda4f4998e2405bb0f Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Mon, 25 Jul 2022 16:01:58 +0200
Subject: [PATCH] feat: lazy load playground (#1145)

* feat: lazy load playground

* fix: app.tsx

* fix: add suspense

* fix: update snapshot
---
 frontend/src/component/App.tsx                | 57 ++++++++++---------
 .../__snapshots__/routes.test.tsx.snap        |  9 ++-
 frontend/src/component/menu/routes.ts         |  4 +-
 .../playground/Playground/LazyPlayground.tsx  |  3 +
 .../playground/Playground/Playground.tsx      |  2 +
 5 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/component/playground/Playground/LazyPlayground.tsx

diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index 3313833635..62c4d55233 100644
--- a/frontend/src/component/App.tsx
+++ b/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
-                condition={!hasFetchedAuth}
-                show={<Loader />}
-                elseShow={
-                    <div className={styles.container}>
-                        <ToastRenderer />
-                        <LayoutPicker>
-                            <Routes>
-                                {availableRoutes.map(route => (
+            <Suspense fallback={<Loader />}>
+                <ConditionallyRender
+                    condition={!hasFetchedAuth}
+                    show={<Loader />}
+                    elseShow={
+                        <div className={styles.container}>
+                            <ToastRenderer />
+                            <LayoutPicker>
+                                <Routes>
+                                    {availableRoutes.map(route => (
+                                        <Route
+                                            key={route.path}
+                                            path={route.path}
+                                            element={
+                                                <ProtectedRoute route={route} />
+                                            }
+                                        />
+                                    ))}
                                     <Route
-                                        key={route.path}
-                                        path={route.path}
+                                        path="/"
                                         element={
-                                            <ProtectedRoute route={route} />
+                                            <Navigate to="/features" replace />
                                         }
                                     />
-                                ))}
-                                <Route
-                                    path="/"
-                                    element={
-                                        <Navigate to="/features" replace />
-                                    }
-                                />
-                                <Route path="*" element={<NotFound />} />
-                            </Routes>
-                            <FeedbackNPS openUrl="http://feedback.unleash.run" />
-                            <SplashPageRedirect />
-                        </LayoutPicker>
-                    </div>
-                }
-            />
+                                    <Route path="*" element={<NotFound />} />
+                                </Routes>
+                                <FeedbackNPS openUrl="http://feedback.unleash.run" />
+                                <SplashPageRedirect />
+                            </LayoutPicker>
+                        </div>
+                    }
+                />
+            </Suspense>
         </SWRProvider>
     );
 };
diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
index aa97b286ac..914c091b0e 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
+++ b/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,
diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts
index c9b9debd2b..70a1ec1af7 100644
--- a/frontend/src/component/menu/routes.ts
+++ b/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 },
diff --git a/frontend/src/component/playground/Playground/LazyPlayground.tsx b/frontend/src/component/playground/Playground/LazyPlayground.tsx
new file mode 100644
index 0000000000..41ea00f4b3
--- /dev/null
+++ b/frontend/src/component/playground/Playground/LazyPlayground.tsx
@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const LazyPlayground = lazy(() => import('./Playground'));
diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx
index 2f6943abdd..50c8bb72bd 100644
--- a/frontend/src/component/playground/Playground/Playground.tsx
+++ b/frontend/src/component/playground/Playground/Playground.tsx
@@ -212,3 +212,5 @@ export const Playground: VFC<{}> = () => {
         </PageContent>
     );
 };
+
+export default Playground;