refactor(routes): convert route components to lazy-loaded for improved performance

apps/frontend/src/main.tsx

@@ -6,15 +6,22 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { RouterProvider } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-import { StrictMode, useEffect } from 'react';
+import { StrictMode, useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { router } from './router';
 import './index.css';
 
 function AppRouter() {
   const auth = useAuth();
+  const prevAuthRef = useRef(auth);
+
+  if (auth !== prevAuthRef.current) {
+    prevAuthRef.current = auth;
+    router.update({ context: { auth, api: apiClient } });
+  }
 
   useEffect(() => {
+    router.update({ context: { auth, api: apiClient } });
     router.invalidate();
   }, [auth.isAuthenticated, auth.loading, auth.user]);
 

apps/frontend/src/routes/$complexSlug/booking/confirmed/$bookingCode.tsx

@@ -1,11 +1,15 @@
-import { PublicBookingConfirmationPage } from '@/features/public-booking/public-booking-confirmation-page';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, lazyRouteComponent } from '@tanstack/react-router';
+
+const PublicBookingConfirmationPage = lazyRouteComponent(
+  () => import('@/features/public-booking/public-booking-confirmation-page'),
+  'PublicBookingConfirmationPage'
+);
 
 export const Route = createFileRoute('/$complexSlug/booking/confirmed/$bookingCode')({
-  component: PublicBookingConfirmationRouteComponent,
+  component: RouteComponent,
 });
 
-function PublicBookingConfirmationRouteComponent() {
+function RouteComponent() {
   const { complexSlug, bookingCode } = Route.useParams();
 
   return <PublicBookingConfirmationPage complexSlug={complexSlug} bookingCode={bookingCode} />;

apps/frontend/src/routes/$complexSlug/booking/index.tsx

@@ -1,11 +1,15 @@
-import { PublicBookingPage } from '@/features/public-booking/public-booking-page';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, lazyRouteComponent } from '@tanstack/react-router';
+
+const PublicBookingPage = lazyRouteComponent(
+  () => import('@/features/public-booking/public-booking-page'),
+  'PublicBookingPage'
+);
 
 export const Route = createFileRoute('/$complexSlug/booking/')({
-  component: PublicBookingIndexRouteComponent,
+  component: RouteComponent,
 });
 
-function PublicBookingIndexRouteComponent() {
+function RouteComponent() {
   const { complexSlug } = Route.useParams();
 
   return <PublicBookingPage complexSlug={complexSlug} />;

apps/frontend/src/routes/_app/_authenticated/complex/$slug/edit.tsx

@@ -1,5 +1,9 @@
-import { ComplexSettingsPage } from '@/features/complex/complex-settings-page';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, lazyRouteComponent } from '@tanstack/react-router';
+
+const ComplexSettingsPage = lazyRouteComponent(
+  () => import('@/features/complex/complex-settings-page'),
+  'ComplexSettingsPage'
+);
 
 export const Route = createFileRoute('/_app/_authenticated/complex/$slug/edit')({
   component: RouteComponent,

apps/frontend/src/routes/_app/profile.tsx

@@ -1,5 +1,9 @@
-import { ProfilePage } from '@/features/profile/profile-page';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, lazyRouteComponent } from '@tanstack/react-router';
+
+const ProfilePage = lazyRouteComponent(
+  () => import('@/features/profile/profile-page'),
+  'ProfilePage'
+);
 
 export const Route = createFileRoute('/_app/profile')({
   component: ProfilePage,

apps/frontend/src/routes/onboard/setup.tsx

@@ -1,5 +1,9 @@
-import { SetupStepperPage } from '@/features/onboard/setup-stepper-page';
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, lazyRouteComponent, redirect } from '@tanstack/react-router';
+
+const SetupStepperPage = lazyRouteComponent(
+  () => import('@/features/onboard/setup-stepper-page'),
+  'SetupStepperPage'
+);
 
 export const Route = createFileRoute('/onboard/setup')({
   beforeLoad: ({ context }) => {