perf(*): Lazy load page components (#324)

grafana · Jan 20, 2025 · c0ffd33 · c0ffd33
1 parent fe445ce
commit c0ffd33
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/src/app/components/Routes/Routes.tsx b/src/app/components/Routes/Routes.tsx
@@ -2,19 +2,20 @@ import React from 'react';
 import { Routes as ReactRouterRoutes, Route } from 'react-router-dom';
 
 import { ROUTES } from '../../../constants';
-import { AdHocView } from '../../../pages/AdHocView/AdHocView';
-import { ProfilesExplorerView } from '../../../pages/ProfilesExplorerView/ProfilesExplorerView';
-import { SettingsView } from '../../../pages/SettingsView/SettingsView';
 import { useNavigationLinksUpdate } from './domain/useNavigationLinksUpdate';
 
+const ProfilesExplorerView = React.lazy(() => import('../../../pages/ProfilesExplorerView/ProfilesExplorerView'));
+const AdHocView = React.lazy(() => import('../../../pages/AdHocView/AdHocView'));
+const SettingsView = React.lazy(() => import('../../../pages/SettingsView/SettingsView'));
+
 export function Routes() {
   useNavigationLinksUpdate();
 
   return (
     <ReactRouterRoutes>
-      <Route path={ROUTES.PROFILES_EXPLORER_VIEW} element={<ProfilesExplorerView />} />
-      <Route path={ROUTES.ADHOC_VIEW} element={<AdHocView />} />
-      <Route path={ROUTES.SETTINGS} element={<SettingsView />} />
+      <Route path={`${ROUTES.PROFILES_EXPLORER_VIEW}/*`} element={<ProfilesExplorerView />} />
+      <Route path={`${ROUTES.ADHOC_VIEW}/*`} element={<AdHocView />} />
+      <Route path={`${ROUTES.SETTINGS}/*`} element={<SettingsView />} />
       {/* Default Route */}
       <Route path="/*" element={<ProfilesExplorerView />} />
     </ReactRouterRoutes>

diff --git a/src/pages/AdHocView/AdHocView.tsx b/src/pages/AdHocView/AdHocView.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { AdHocTabs } from './ui/AdHocTabs';
 
-export function AdHocView() {
+export default function AdHocView() {
   return (
     <>
       <PageTitle title="Ad hoc view" />

diff --git a/src/pages/ProfilesExplorerView/ProfilesExplorerView.tsx b/src/pages/ProfilesExplorerView/ProfilesExplorerView.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 
 import { SceneProfilesExplorer } from './components/SceneProfilesExplorer/SceneProfilesExplorer';
 
-export function ProfilesExplorerView() {
+export default function ProfilesExplorerView() {
   const sceneProfilesExplorer = useMemo(() => new SceneProfilesExplorer(), []);
 
   return <sceneProfilesExplorer.Component model={sceneProfilesExplorer} />;

diff --git a/src/pages/SettingsView/SettingsView.tsx b/src/pages/SettingsView/SettingsView.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 
 import { useSettingsView } from './domain/useSettingsView';
 
-export function SettingsView() {
+export default function SettingsView() {
   const styles = useStyles2(getStyles);
   const { data, actions } = useSettingsView();