Skip to content

Commit 206fafb

Browse files
fpagnouxfpagnoux
authored
Lazy load low frequency pages (#101)
1 parent 7a01e87 commit 206fafb

File tree

18 files changed

+117
-92
lines changed

18 files changed

+117
-92
lines changed

‎src/App.tsx‎

Lines changed: 97 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect } from "react";
1+
import { lazy, Suspense, useEffect } from "react";
22
import {
33
BrowserRouter as Router,
44
Navigate,
@@ -8,24 +8,44 @@ import {
88

99
import { refreshCsrfToken } from "src/apiClient/client";
1010
import BaseLayout from "src/components/BaseLayout";
11-
import { ApprovalsPage } from "src/pages/Approvals";
12-
import { AddNewApproval } from "src/pages/Approvals/AddNewApproval";
13-
import { GearInventoryPage } from "src/pages/Inventory/GearInventoryPage";
14-
import { ApproveDeskCreditPage } from "src/pages/OfficeHours/ApproveDeskCreditPage";
15-
import { MyOfficeHoursHistory } from "src/pages/OfficeHours/MyOfficeHoursHistory";
16-
import { OfficeHoursHistory } from "src/pages/OfficeHours/OfficeHoursHistory";
17-
import { RequestDeskCreditPage } from "src/pages/OfficeHours/RequestDeskCreditPage";
18-
import { ChangePassword } from "src/pages/People/PersonProfile/PersonChangePassword";
1911
import { useLoadCurrentUser, usePermissions } from "src/redux/auth";
2012

21-
import { AllGearPage, GearItemPage } from "./pages/Gear";
22-
import { AddNewGear } from "./pages/Gear/AddNewGear";
2313
import LoginPage from "./pages/LogIn";
24-
import { RequestPasswordConfirm } from "./pages/LogIn/RequestPasswordConfirm";
25-
import { RequestPasswordReset } from "./pages/LogIn/RequestPasswordReset";
26-
import { OfficeHoursPage } from "./pages/OfficeHours";
2714
import { PeoplePage, PersonPage } from "./pages/People";
28-
import { AddNewPerson } from "./pages/People/AddNewPerson";
15+
16+
const ApprovalsPage = lazy(() => import("./pages/Approvals/ApprovalsPage"));
17+
const AddNewApproval = lazy(() => import("./pages/Approvals/AddNewApproval"));
18+
const GearInventoryPage = lazy(
19+
() => import("./pages/Inventory/GearInventoryPage"),
20+
);
21+
const ApproveDeskCreditPage = lazy(
22+
() => import("./pages/OfficeHours/ApproveDeskCreditPage"),
23+
);
24+
const MyOfficeHoursHistory = lazy(
25+
() => import("./pages/OfficeHours/MyOfficeHoursHistory"),
26+
);
27+
const OfficeHoursHistory = lazy(
28+
() => import("./pages/OfficeHours/OfficeHoursHistory"),
29+
);
30+
const RequestDeskCreditPage = lazy(
31+
() => import("./pages/OfficeHours/RequestDeskCreditPage"),
32+
);
33+
const ChangePassword = lazy(
34+
() => import("./pages/People/PersonProfile/PersonChangePassword"),
35+
);
36+
const AllGearPage = lazy(() => import("./pages/Gear/AllGearPage"));
37+
const GearItemPage = lazy(() => import("./pages/Gear/GearItemPage"));
38+
const AddNewGear = lazy(() => import("./pages/Gear/AddNewGear"));
39+
const RequestPasswordConfirm = lazy(
40+
() => import("./pages/LogIn/RequestPasswordConfirm"),
41+
);
42+
const RequestPasswordReset = lazy(
43+
() => import("./pages/LogIn/RequestPasswordReset"),
44+
);
45+
const OfficeHoursPage = lazy(
46+
() => import("./pages/OfficeHours/OfficeHoursPage"),
47+
);
48+
const AddNewPerson = lazy(() => import("./pages/People/AddNewPerson"));
2949

3050
function App() {
3151
const { loggedIn, isLoading } = useLoadCurrentUser();
@@ -62,23 +82,25 @@ function App() {
6282
return (
6383
<Router basename="/">
6484
<BaseLayout>
65-
<Routes>
66-
{publicRoutes}
67-
<Route
68-
path="*"
69-
element={
70-
<Navigate
71-
to={{
72-
pathname: "/login",
73-
search: `redirectTo=${encodeURIComponent(
74-
pathname + search,
75-
)}`,
76-
}}
77-
replace
78-
/>
79-
}
80-
/>
81-
</Routes>
85+
<Suspense>
86+
<Routes>
87+
{publicRoutes}
88+
<Route
89+
path="*"
90+
element={
91+
<Navigate
92+
to={{
93+
pathname: "/login",
94+
search: `redirectTo=${encodeURIComponent(
95+
pathname + search,
96+
)}`,
97+
}}
98+
replace
99+
/>
100+
}
101+
/>
102+
</Routes>
103+
</Suspense>
82104
</BaseLayout>
83105
</Router>
84106
);
@@ -87,44 +109,49 @@ function App() {
87109
return (
88110
<Router basename="/">
89111
<BaseLayout>
90-
<Routes>
91-
{publicRoutes}
92-
93-
<Route path="/change-password" element={<ChangePassword />} />
94-
95-
<Route path="/people" element={<PeoplePage />} />
96-
<Route path="/people/:personId" element={<PersonPage />} />
97-
<Route path="/add-person" element={<AddNewPerson />} />
98-
99-
<Route path="/add-gear" element={<AddNewGear />} />
100-
<Route path="/gear" element={<AllGearPage />} />
101-
<Route path="/gear/:gearId" element={<GearItemPage />} />
102-
103-
<Route path="/office-hours" element={<OfficeHoursPage />} />
104-
<Route path="/gear-inventory" element={<GearInventoryPage />} />
105-
<Route path="/approvals" element={<ApprovalsPage />} />
106-
107-
{isApprover && (
108-
<Route path="/add-approval" element={<AddNewApproval />} />
109-
)}
110-
111-
<Route
112-
path="/request-desk-credit"
113-
element={<RequestDeskCreditPage />}
114-
/>
115-
<Route
116-
path="/approve-desk-credit"
117-
element={<ApproveDeskCreditPage />}
118-
/>
119-
<Route
120-
path="/office-hours-history"
121-
element={<OfficeHoursHistory />}
122-
/>
123-
<Route path="/volunteer-history" element={<MyOfficeHoursHistory />} />
124-
125-
<Route path="/" element={<Navigate to="/people" replace />} />
126-
<Route path="*" element={<Navigate to="/people" replace />} />
127-
</Routes>
112+
<Suspense>
113+
<Routes>
114+
{publicRoutes}
115+
116+
<Route path="/change-password" element={<ChangePassword />} />
117+
118+
<Route path="/people" element={<PeoplePage />} />
119+
<Route path="/people/:personId" element={<PersonPage />} />
120+
<Route path="/add-person" element={<AddNewPerson />} />
121+
122+
<Route path="/add-gear" element={<AddNewGear />} />
123+
<Route path="/gear" element={<AllGearPage />} />
124+
<Route path="/gear/:gearId" element={<GearItemPage />} />
125+
126+
<Route path="/office-hours" element={<OfficeHoursPage />} />
127+
<Route path="/gear-inventory" element={<GearInventoryPage />} />
128+
<Route path="/approvals" element={<ApprovalsPage />} />
129+
130+
{isApprover && (
131+
<Route path="/add-approval" element={<AddNewApproval />} />
132+
)}
133+
134+
<Route
135+
path="/request-desk-credit"
136+
element={<RequestDeskCreditPage />}
137+
/>
138+
<Route
139+
path="/approve-desk-credit"
140+
element={<ApproveDeskCreditPage />}
141+
/>
142+
<Route
143+
path="/office-hours-history"
144+
element={<OfficeHoursHistory />}
145+
/>
146+
<Route
147+
path="/volunteer-history"
148+
element={<MyOfficeHoursHistory />}
149+
/>
150+
151+
<Route path="/" element={<Navigate to="/people" replace />} />
152+
<Route path="*" element={<Navigate to="/people" replace />} />
153+
</Routes>
154+
</Suspense>
128155
</BaseLayout>
129156
</Router>
130157
);

‎src/pages/Approvals/AddNewApproval.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { gearDbApi } from "src/redux/api";
1212

1313
import { AddNewApprovalForm } from "./AddNewApprovalForm";
1414

15-
export function AddNewApproval() {
15+
export default function AddNewApproval() {
1616
useSetPageTitle("Approve restricted gear rental");
1717
const navigate = useNavigate();
1818
const location = useLocation();

‎src/pages/Approvals/ApprovalsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useConfig } from "src/redux/hooks";
1111

1212
import { ApprovalsTable } from "./ApprovalsTable";
1313

14-
export function ApprovalsPage() {
14+
export default function ApprovalsPage() {
1515
useSetPageTitle("Restricted gear");
1616
const { isApprover } = usePermissions();
1717
const [showExpired, setShowExpired] = useState<boolean>(false);

‎src/pages/Approvals/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/pages/Gear/AddNewGear/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { AddNewGear } from "./AddNewGear";
1+
export { AddNewGear as default } from "./AddNewGear";

‎src/pages/Gear/AllGearPage/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { AllGearPage } from "./AllGearPage";
1+
export { AllGearPage as default } from "./AllGearPage";

‎src/pages/Gear/GearItemPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { GearInfoPanel } from "./GearInfoPanel";
99
import { GearPicture } from "./GearPicture";
1010
import { GearRentalsHistory } from "./GearRentalsHistory";
1111

12-
export function GearItemPage() {
12+
export default function GearItemPage() {
1313
const gearId = useParams<{ gearId: string }>().gearId!;
1414
useSetPageTitle(gearId);
1515
const { data: gearItem, refetch: refreshGear } = useGetGearItemQuery(gearId);

‎src/pages/Inventory/GearInventoryPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { editGearType, GearType } from "src/apiClient/gear";
33
import { useSetPageTitle } from "src/hooks";
44
import { useGetGearTypesQuery } from "src/redux/api";
55

6-
export function GearInventoryPage() {
6+
export default function GearInventoryPage() {
77
useSetPageTitle("Gear Inventory");
88
const { data: allGearTypes, refetch } = useGetGearTypesQuery();
99
return (

‎src/pages/LogIn/RequestPasswordConfirm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type FormValues = {
1111
password: string;
1212
};
1313

14-
export function RequestPasswordConfirm() {
14+
export default function RequestPasswordConfirm() {
1515
useSetPageTitle("Reset password");
1616
const [tokenVerified, setTokenVerified] = useState<boolean | null>(null);
1717
const [success, setSuccess] = useState<boolean>(false);

‎src/pages/LogIn/RequestPasswordReset.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { authClient } from "src/apiClient/auth";
55
import { useSetPageTitle } from "src/hooks";
66
import { validateEmail } from "src/lib/validation";
77

8-
export function RequestPasswordReset() {
8+
export default function RequestPasswordReset() {
99
useSetPageTitle("Reset password");
1010
const { search } = useLocation();
1111
const params = new URLSearchParams(search);

0 commit comments

Comments
 (0)