From 4c18ebf61a471995a91fe976bca5116221eb2c76 Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Mon, 22 Aug 2022 14:49:24 +0200
Subject: [PATCH] load swagger-ui css lazily

---
 commafeed-client/src/App.tsx                     |  4 +++-
 commafeed-client/src/main.tsx                    |  1 -
 .../src/pages/app/ApiDocumentationPage.tsx       | 16 ++++++----------
 commafeed-client/src/pages/app/Layout.tsx        |  7 +++++--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx
index 54f47abb..3d639169 100644
--- a/commafeed-client/src/App.tsx
+++ b/commafeed-client/src/App.tsx
@@ -17,7 +17,6 @@ import { AdminUsersPage } from "pages/admin/AdminUsersPage"
 import { MetricsPage } from "pages/admin/MetricsPage"
 import { AboutPage } from "pages/app/AboutPage"
 import { AddPage } from "pages/app/AddPage"
-import { ApiDocumentationPage } from "pages/app/ApiDocumentationPage"
 import { CategoryDetailsPage } from "pages/app/CategoryDetailsPage"
 import { FeedDetailsPage } from "pages/app/FeedDetailsPage"
 import { FeedEntriesPage } from "pages/app/FeedEntriesPage"
@@ -61,6 +60,9 @@ function Providers(props: { children: React.ReactNode }) {
     )
 }
 
+// swagger-ui is very large, load only on-demand
+const ApiDocumentationPage = React.lazy(() => import("pages/app/ApiDocumentationPage"))
+
 function AppRoutes() {
     return (
         <Routes>
diff --git a/commafeed-client/src/main.tsx b/commafeed-client/src/main.tsx
index 1637f49e..6d2d3138 100644
--- a/commafeed-client/src/main.tsx
+++ b/commafeed-client/src/main.tsx
@@ -4,7 +4,6 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import ReactDOM from "react-dom/client"
 import { Provider } from "react-redux"
-import "swagger-ui-react/swagger-ui.css"
 import { App } from "./App"
 
 dayjs.extend(relativeTime)
diff --git a/commafeed-client/src/pages/app/ApiDocumentationPage.tsx b/commafeed-client/src/pages/app/ApiDocumentationPage.tsx
index e35b7398..f9eccc58 100644
--- a/commafeed-client/src/pages/app/ApiDocumentationPage.tsx
+++ b/commafeed-client/src/pages/app/ApiDocumentationPage.tsx
@@ -1,12 +1,8 @@
-import { Loader } from "components/Loader"
-import React, { Suspense } from "react"
+import SwaggerUI from "swagger-ui-react"
+import "swagger-ui-react/swagger-ui.css"
 
-export function ApiDocumentationPage() {
-    // swagger-ui is very large, load only on-demand
-    const SwaggerUI = React.lazy(() => import("swagger-ui-react"))
-    return (
-        <Suspense fallback={<Loader />}>
-            <SwaggerUI url="swagger/swagger.json" />
-        </Suspense>
-    )
+function ApiDocumentationPage() {
+    return <SwaggerUI url="swagger/swagger.json" />
 }
+
+export default ApiDocumentationPage
diff --git a/commafeed-client/src/pages/app/Layout.tsx b/commafeed-client/src/pages/app/Layout.tsx
index b2df4f1d..5b20ce8d 100644
--- a/commafeed-client/src/pages/app/Layout.tsx
+++ b/commafeed-client/src/pages/app/Layout.tsx
@@ -9,6 +9,7 @@ import {
     DEFAULT_THEME,
     Group,
     Header,
+    Loader,
     Navbar,
     ScrollArea,
     Title,
@@ -25,7 +26,7 @@ import { OnDesktop } from "components/responsive/OnDesktop"
 import { OnMobile } from "components/responsive/OnMobile"
 import { useAppLoading } from "hooks/useAppLoading"
 import { LoadingPage } from "pages/LoadingPage"
-import { ReactNode, useEffect } from "react"
+import { ReactNode, Suspense, useEffect } from "react"
 import { TbPlus } from "react-icons/tb"
 import { Outlet } from "react-router-dom"
 
@@ -168,7 +169,9 @@ export default function Layout({ sidebar, header }: LayoutProps) {
                 }}
             >
                 <Box className={classes.mainContent}>
-                    <Outlet />
+                    <Suspense fallback={<Loader />}>
+                        <Outlet />
+                    </Suspense>
                 </Box>
             </ScrollArea>
         </AppShell>