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

Author: grafakus

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>

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" />

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} />;

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();