fix: lazy load new routes

twentyhq · Feb 25, 2025 · ba37a05 · ba37a05
1 parent fec77f4
commit ba37a05
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
@@ -6,9 +6,30 @@ import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLo
 import { SettingsPath } from '@/types/SettingsPath';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { SettingsPermissions } from '~/generated/graphql';
-import { SettingsApiKeys } from '~/pages/settings/developers/api-keys/SettingsApiKeys';
-import { PlaygroundRouter } from '~/pages/settings/developers/playground/PlaygroundRouter';
-import { SettingsWebhooks } from '~/pages/settings/developers/webhooks/components/SettingsWebhooks';
+
+const SettingsApiKeys = lazy(() =>
+  import('~/pages/settings/developers/api-keys/SettingsApiKeys').then(
+    (module) => ({
+      default: module.SettingsApiKeys,
+    }),
+  ),
+);
+
+const PlaygroundRouter = lazy(() =>
+  import('~/pages/settings/developers/playground/PlaygroundRouter').then(
+    (module) => ({
+      default: module.PlaygroundRouter,
+    }),
+  ),
+);
+
+const SettingsWebhooks = lazy(() =>
+  import(
+    '~/pages/settings/developers/webhooks/components/SettingsWebhooks'
+  ).then((module) => ({
+    default: module.SettingsWebhooks,
+  })),
+);
 
 const SettingsAccountsCalendars = lazy(() =>
   import('~/pages/settings/accounts/SettingsAccountsCalendars').then(

diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
@@ -9,13 +9,13 @@ import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSet
 import { SignInAppNavigationDrawerMock } from '@/sign-in-background-mock/components/SignInAppNavigationDrawerMock';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
+import { useShowFullscreen } from '@/ui/layout/hooks/useShowFullscreen';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { Global, css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
-import { useShowFullscreen } from 'twenty-front/src/modules/ui/layout/hooks/useShowFullscreen';
 import { useScreenSize } from 'twenty-ui';
 
 const StyledLayout = styled.div`