jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jose Selesan
2026-06-02 10:55:55 -03:00
parent 83fa1ea020
commit 7a30f9a29b
6 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/frontend/src/main.tsx
View File

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

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

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

12
apps/frontend/src/routes/$complexSlug/booking/index.tsx
View File

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

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

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

8
apps/frontend/src/routes/_app/profile.tsx
View File

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

8
apps/frontend/src/routes/onboard/setup.tsx
View File

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