From 7a30f9a29b96336bd597019f8f17e4682cb61920 Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Tue, 2 Jun 2026 10:55:55 -0300
Subject: [PATCH] refactor(routes): convert route components to lazy-loaded for
 improved performance

---
 apps/frontend/src/main.tsx                           |  9 ++++++++-
 .../$complexSlug/booking/confirmed/$bookingCode.tsx  | 12 ++++++++----
 .../src/routes/$complexSlug/booking/index.tsx        | 12 ++++++++----
 .../_app/_authenticated/complex/$slug/edit.tsx       |  8 ++++++--
 apps/frontend/src/routes/_app/profile.tsx            |  8 ++++++--
 apps/frontend/src/routes/onboard/setup.tsx           |  8 ++++++--
 6 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index f3b2854..f5fb82c 100644
--- a/apps/frontend/src/main.tsx
+++ b/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]);
 
diff --git a/apps/frontend/src/routes/$complexSlug/booking/confirmed/$bookingCode.tsx b/apps/frontend/src/routes/$complexSlug/booking/confirmed/$bookingCode.tsx
index 9371023..f3d0584 100644
--- a/apps/frontend/src/routes/$complexSlug/booking/confirmed/$bookingCode.tsx
+++ b/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} />;
diff --git a/apps/frontend/src/routes/$complexSlug/booking/index.tsx b/apps/frontend/src/routes/$complexSlug/booking/index.tsx
index 9d080a1..70b020d 100644
--- a/apps/frontend/src/routes/$complexSlug/booking/index.tsx
+++ b/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} />;
diff --git a/apps/frontend/src/routes/_app/_authenticated/complex/$slug/edit.tsx b/apps/frontend/src/routes/_app/_authenticated/complex/$slug/edit.tsx
index b0705dd..6b80ccb 100644
--- a/apps/frontend/src/routes/_app/_authenticated/complex/$slug/edit.tsx
+++ b/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,
diff --git a/apps/frontend/src/routes/_app/profile.tsx b/apps/frontend/src/routes/_app/profile.tsx
index b6ad326..d2a9fe8 100644
--- a/apps/frontend/src/routes/_app/profile.tsx
+++ b/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,
diff --git a/apps/frontend/src/routes/onboard/setup.tsx b/apps/frontend/src/routes/onboard/setup.tsx
index 4459962..5643045 100644
--- a/apps/frontend/src/routes/onboard/setup.tsx
+++ b/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 }) => {