From b4c6f275433cb85912376dd061a66c4b1a682d83 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Fri, 20 Jun 2025 18:13:57 +0200
Subject: [PATCH] Lazy load components at top level, not inside another
 component

---
 frontend/src/App.tsx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4ae9e654..82dc26f8 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -51,6 +51,24 @@ import { Landingpage } from './pages/Landingpage'
 import MapContainer from './pages/MapContainer'
 import { getBottomRoutes, routes } from './routes/sidebar'
 
+const ProfileForm = lazy(() =>
+  import('utopia-ui/Profile').then((mod) => ({
+    default: mod.ProfileForm,
+  })),
+)
+
+const ProfileView = lazy(() =>
+  import('utopia-ui/Profile').then((mod) => ({
+    default: mod.ProfileView,
+  })),
+)
+
+const UserSettings = lazy(() =>
+  import('utopia-ui/Profile').then((mod) => ({
+    default: mod.UserSettings,
+  })),
+)
+
 function App() {
   const [permissionsApiInstance, setPermissionsApiInstance] = useState<permissionsApi>()
   const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>()
@@ -134,24 +152,6 @@ function App() {
   const currentUrl = window.location.href
   const bottomRoutes = getBottomRoutes(currentUrl)
 
-  const ProfileForm = lazy(() =>
-    import('utopia-ui/Profile').then((mod) => ({
-      default: mod.ProfileForm,
-    })),
-  )
-
-  const ProfileView = lazy(() =>
-    import('utopia-ui/Profile').then((mod) => ({
-      default: mod.ProfileView,
-    })),
-  )
-
-  const UserSettings = lazy(() =>
-    import('utopia-ui/Profile').then((mod) => ({
-      default: mod.UserSettings,
-    })),
-  )
-
   if (map && layers)
     return (
       <div className='App overflow-x-hidden'>