Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: lazy load playground (#1145)

Browse Source 
* feat: lazy load playground

* fix: app.tsx

* fix: add suspense

* fix: update snapshot
This commit is contained in:
Fredrik Strand Oseberg 2022-07-25 16:01:58 +02:00 committed by GitHub
parent 3fad1bb230
commit d4f46eaf2e
5 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/component/App.tsx
View File

@ -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>
);
};

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

@ -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,

4
frontend/src/component/menu/routes.ts
View File

@ -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 },

3
frontend/src/component/playground/Playground/LazyPlayground.tsx Normal file
View File

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

2
frontend/src/component/playground/Playground/Playground.tsx
View File

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