load swagger-ui css lazily

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>

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)

commafeed-client/src/pages/app/ApiDocumentationPage.tsx

@@ -1,12 +1,8 @@
-import { Loader } from "components/Loader"
+import SwaggerUI from "swagger-ui-react"
-import React, { Suspense } from "react"
+import "swagger-ui-react/swagger-ui.css"
 
-export function ApiDocumentationPage() {
+function ApiDocumentationPage() {
-    // swagger-ui is very large, load only on-demand
+    return <SwaggerUI url="swagger/swagger.json" />
-    const SwaggerUI = React.lazy(() => import("swagger-ui-react"))
-    return (
-        <Suspense fallback={<Loader />}>
-            <SwaggerUI url="swagger/swagger.json" />
-        </Suspense>
-    )
 }
+
+export default ApiDocumentationPage

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>