fix: use code-splitting on routes

src/routeTree.gen.ts

@@ -8,36 +8,41 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
+import { createFileRoute } from '@tanstack/react-router'
+
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as LoginImport } from './routes/login'
 import { Route as AccountImport } from './routes/account'
-import { Route as IndexImport } from './routes/index'
 import { Route as AccountIndexImport } from './routes/account/index'
 import { Route as EmailChangeImport } from './routes/email.change'
 import { Route as AccountStorageImport } from './routes/account/storage'
 import { Route as AccountSettingsImport } from './routes/account/settings'
 
+// Create Virtual Routes
+
+const IndexLazyImport = createFileRoute('/')()
+
 // Create/Update Routes
 
 const LoginRoute = LoginImport.update({
   id: '/login',
   path: '/login',
   getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() => import('./routes/login.lazy').then((d) => d.Route))
 
 const AccountRoute = AccountImport.update({
   id: '/account',
   path: '/account',
   getParentRoute: () => rootRoute,
 } as any)
 
-const IndexRoute = IndexImport.update({
+const IndexLazyRoute = IndexLazyImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
 const AccountIndexRoute = AccountIndexImport.update({
   id: '/',
@@ -71,7 +76,7 @@ declare module '@tanstack/react-router' {
       id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexImport
+      preLoaderRoute: typeof IndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/account': {
@@ -137,7 +142,7 @@ const AccountRouteWithChildren =
   AccountRoute._addFileChildren(AccountRouteChildren)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
+  '/': typeof IndexLazyRoute
   '/account': typeof AccountRouteWithChildren
   '/login': typeof LoginRoute
   '/account/settings': typeof AccountSettingsRoute
@@ -147,7 +152,7 @@ export interface FileRoutesByFullPath {
 }
 
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
+  '/': typeof IndexLazyRoute
   '/login': typeof LoginRoute
   '/account/settings': typeof AccountSettingsRoute
   '/account/storage': typeof AccountStorageRoute
@@ -157,7 +162,7 @@ export interface FileRoutesByTo {
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
-  '/': typeof IndexRoute
+  '/': typeof IndexLazyRoute
   '/account': typeof AccountRouteWithChildren
   '/login': typeof LoginRoute
   '/account/settings': typeof AccountSettingsRoute
@@ -197,14 +202,14 @@ export interface FileRouteTypes {
 }
 
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
+  IndexLazyRoute: typeof IndexLazyRoute
   AccountRoute: typeof AccountRouteWithChildren
   LoginRoute: typeof LoginRoute
   EmailChangeRoute: typeof EmailChangeRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
+  IndexLazyRoute: IndexLazyRoute,
   AccountRoute: AccountRouteWithChildren,
   LoginRoute: LoginRoute,
   EmailChangeRoute: EmailChangeRoute,
@@ -227,7 +232,7 @@ export const routeTree = rootRoute
       ]
     },
     "/": {
-      "filePath": "index.tsx"
+      "filePath": "index.lazy.tsx"
     },
     "/account": {
       "filePath": "account.tsx",

src/routes/account/settings.tsx

@@ -18,12 +18,12 @@ export const Route = createFileRoute('/account/settings')({
 });
 
 function SettingsRoute(): JSX.Element {
-  const { t: translateAccount } = useTranslation(NS.Account);
+  const { t } = useTranslation(NS.Account);
 
   return (
     <ScreenLayout
       id={SETTINGS_PAGE_CONTAINER_ID}
-      title={translateAccount('MAIN_MENU_SETTINGS')}
+      title={t('MAIN_MENU_SETTINGS')}
     >
       <PersonalInformation />
       <Password />

src/routes/index.tsx → src/routes/index.lazy.tsx

@@ -4,14 +4,14 @@ import { Stack, Typography } from '@mui/material';
 
 import { Button, DEFAULT_LIGHT_PRIMARY_COLOR, GraaspLogo } from '@graasp/ui';
 
-import { Link, createFileRoute } from '@tanstack/react-router';
+import { Link, createLazyFileRoute } from '@tanstack/react-router';
 
 import { useAuth } from '@/AuthContext';
 import { LeftHeaderWrapper } from '@/components/header/LeftHeaderWrapper';
 import { NS } from '@/config/constants';
 import { ACCOUNT_HOME_PATH, LANDING_PAGE_PATH } from '@/config/paths';
 
-export const Route = createFileRoute('/')({
+export const Route = createLazyFileRoute('/')({
   component: Index,
 });
 

src/routes/login.lazy.tsx

@@ -0,0 +1,47 @@
+import { Button, Stack, Typography } from '@mui/material';
+
+import { buildSignInPath } from '@graasp/sdk';
+import { useButtonColor } from '@graasp/ui';
+
+import { createLazyFileRoute } from '@tanstack/react-router';
+import { ArrowRightIcon, LockIcon } from 'lucide-react';
+
+import { GRAASP_AUTH_HOST } from '@/config/env';
+import { useAccountTranslation } from '@/config/i18n';
+import {
+  LOGIN_REQUIRED_BUTTON_ID,
+  LOGIN_REQUIRED_TEXT_ID,
+} from '@/config/selectors';
+import { ACCOUNT } from '@/langs/constants';
+
+export const Route = createLazyFileRoute('/login')({
+  component: LoginRoute,
+});
+
+function LoginRoute() {
+  const { url } = Route.useSearch();
+  const { t, i18n } = useAccountTranslation();
+  const { color } = useButtonColor('primary');
+  return (
+    <Stack height="100vh" alignItems="center" justifyContent="center" gap={2}>
+      <LockIcon color={color} />
+      <Typography id={LOGIN_REQUIRED_TEXT_ID}>
+        {t(ACCOUNT.LOGIN_REQUIRED_TEXT)}
+      </Typography>
+      <Button
+        id={LOGIN_REQUIRED_BUTTON_ID}
+        component="a"
+        variant="contained"
+        sx={{ textTransform: 'none' }}
+        href={buildSignInPath({
+          host: GRAASP_AUTH_HOST,
+          redirectionUrl: url,
+          lang: i18n.language,
+        })}
+        endIcon={<ArrowRightIcon />}
+      >
+        {t(ACCOUNT.LOGIN_REQUIRED_BUTTON_TEXT)}
+      </Button>
+    </Stack>
+  );
+}