From a695869aa0ff35fb9e6e1ec5fda751d3bd2ed1cc Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 5 Jun 2023 13:38:48 +0200
Subject: [PATCH] lazy demo

---
 frontend/src/component/demo/LazyDemo.tsx          | 15 +++++++++++++++
 .../component/layout/MainLayout/MainLayout.tsx    |  6 +++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/component/demo/LazyDemo.tsx

diff --git a/frontend/src/component/demo/LazyDemo.tsx b/frontend/src/component/demo/LazyDemo.tsx
new file mode 100644
index 0000000000..b81f5d4495
--- /dev/null
+++ b/frontend/src/component/demo/LazyDemo.tsx
@@ -0,0 +1,15 @@
+import { FC, Suspense, lazy } from 'react';
+
+const LazyDemoComponent = lazy(() =>
+    import('./Demo').then(module => ({
+        default: module.Demo,
+    }))
+);
+
+export const LazyDemo: FC = ({ children }) => (
+    <Suspense fallback={<>{children}</>}>
+        <LazyDemoComponent>
+            <>{children}</>
+        </LazyDemoComponent>
+    </Suspense>
+);
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index eab8cb03df..199573f786 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -14,7 +14,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
-import { Demo } from 'component/demo/Demo';
+import { LazyDemo } from 'component/demo/LazyDemo';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -85,7 +85,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
         return (
             <>
                 <SkipNavLink />
-                <Demo>
+                <LazyDemo>
                     <>
                         <Header />
                         <SkipNavTarget />
@@ -128,7 +128,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                             <Footer />
                         </MainLayoutContainer>
                     </>
-                </Demo>
+                </LazyDemo>
             </>
         );
     }