From 6ad4477f4b74f69c3e293597333f7123a8115094 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Mon, 4 Aug 2025 11:29:25 +0200
Subject: [PATCH] fix: lazy load plugin detail view

reduces main js size by 400kb
---
 ui/src/layout/Layout.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
index cd35b18..bb5e652 100644
--- a/ui/src/layout/Layout.tsx
+++ b/ui/src/layout/Layout.tsx
@@ -11,7 +11,6 @@ import * as config from '../config';
 import Applications from '../application/Applications';
 import Clients from '../client/Clients';
 import Plugins from '../plugin/Plugins';
-import PluginDetailView from '../plugin/PluginDetailView';
 import Login from '../user/Login';
 import Messages from '../message/Messages';
 import Users from '../user/Users';
@@ -19,6 +18,7 @@ import {observer} from 'mobx-react';
 import {ConnectionErrorBanner} from '../common/ConnectionErrorBanner';
 import {useStores} from '../stores';
 import {SnackbarProvider} from 'notistack';
+import LoadingSpinner from '../common/LoadingSpinner';
 
 const useStyles = makeStyles()((theme: Theme) => ({
     content: {
@@ -128,7 +128,13 @@ const Layout = observer(() => {
                                         <Route path="/plugins" element={authed(<Plugins />)} />
                                         <Route
                                             path="/plugins/:id"
-                                            element={authed(<PluginDetailView />)}
+                                            element={authed(
+                                                <Lazy
+                                                    component={() =>
+                                                        import('../plugin/PluginDetailView')
+                                                    }
+                                                />
+                                            )}
                                         />
                                     </Routes>
                                 </main>
@@ -146,6 +152,17 @@ const Layout = observer(() => {
     );
 });
 
+// eslint-disable-next-line
+const Lazy = ({component}: {component: () => Promise<{default: React.ComponentType<any>}>}) => {
+    const Component = React.lazy(component);
+
+    return (
+        <React.Suspense fallback={<LoadingSpinner />}>
+            <Component />
+        </React.Suspense>
+    );
+};
+
 const RequireAuth: React.FC<React.PropsWithChildren<{loggedIn: boolean}>> = ({
     children,
     loggedIn,