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,6 +31,7 @@ export const App = () => {
 
     return (
         <SWRProvider isUnauthorized={!isLoggedIn}>
+            <Suspense fallback={<Loader />}>
                 <ConditionallyRender
                     condition={!hasFetchedAuth}
                     show={<Loader />}
@@ -61,6 +63,7 @@ export const App = () => {
                         </div>
                     }
                 />
+            </Suspense>
         </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;