From a002bfb136ec912bf06712049fbf3dcd9f8fcf1a Mon Sep 17 00:00:00 2001
From: Thor Tveito <thortve@stud.ntnu.no>
Date: Mon, 12 Oct 2026 12:30:34 +0200
Subject: [PATCH 1/2] Perf: Lazy-load secondary pages and the Leaflet map

Load the detail and submit pages with React.lazy, so only the landing
page is in the first download. Lazy-load the map in the result list
too, with a placeholder of the same size, so the text of the results
renders before Leaflet arrives.

JavaScript needed before the first render goes from 636.65 kB
(196.43 kB gzip) to 464.62 kB (143.93 kB gzip), and the Vite warning
about chunks over 500 kB is gone. The landing page still fetches
Leaflet (49.92 kB gzip) for the map thumbnails, but after first render.

Refs #55

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/App.tsx                     | 20 +++++++++++++-------
 frontend/src/components/SightingList.css |  4 ++++
 frontend/src/components/SightingList.tsx | 19 +++++++++++++++++--
 frontend/src/tests/SightingList.test.tsx |  5 +++--
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 468e4c1..0ba3a2e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,21 +1,27 @@
+import { lazy, Suspense } from 'react'
 import { Route, Routes } from 'react-router'
 import BackendStatus from './components/BackendStatus'
 import Banner from './components/Banner'
 import SearchPage from './pages/SearchPage'
-import SightingDetailPage from './pages/SightingDetailPage'
-import SubmitSightingPage from './pages/SubmitSightingPage'
 import './App.css'
 
+// Only the landing page is in the first download. The other pages are
+// fetched when their route is first visited, including by direct link.
+const SightingDetailPage = lazy(() => import('./pages/SightingDetailPage'))
+const SubmitSightingPage = lazy(() => import('./pages/SubmitSightingPage'))
+
 function App() {
   return (
     <>
       <Banner />
       <main className="app">
-        <Routes>
-          <Route path="/" element={<SearchPage />} />
-          <Route path="/sightings/:id" element={<SightingDetailPage />} />
-          <Route path="/submit" element={<SubmitSightingPage />} />
-        </Routes>
+        <Suspense fallback={<p role="status">Loading…</p>}>
+          <Routes>
+            <Route path="/" element={<SearchPage />} />
+            <Route path="/sightings/:id" element={<SightingDetailPage />} />
+            <Route path="/submit" element={<SubmitSightingPage />} />
+          </Routes>
+        </Suspense>
       </main>
       <footer>
         <BackendStatus />
diff --git a/frontend/src/components/SightingList.css b/frontend/src/components/SightingList.css
index a5d59c1..cbbe045 100644
--- a/frontend/src/components/SightingList.css
+++ b/frontend/src/components/SightingList.css
@@ -46,6 +46,10 @@
   min-height: 180px;
 }
 
+.sighting-list__map-placeholder {
+  background: var(--code-bg);
+}
+
 .sighting-list__content {
   min-width: 0;
 }
diff --git a/frontend/src/components/SightingList.tsx b/frontend/src/components/SightingList.tsx
index 341112c..d10892d 100644
--- a/frontend/src/components/SightingList.tsx
+++ b/frontend/src/components/SightingList.tsx
@@ -1,3 +1,4 @@
+import { lazy, Suspense } from 'react'
 import { Link, useLocation } from 'react-router'
 import type { UfoSighting } from '../types/ufo-sighting'
 import {
@@ -5,9 +6,12 @@ import {
   formatDuration,
   formatLocation,
 } from '../utils/format-sighting'
-import SightingMap from './SightingMap'
 import './SightingList.css'
 
+// Leaflet is the largest part of the landing page's JavaScript, so it is
+// fetched after the text of the results is already on screen.
+const SightingMap = lazy(() => import('./SightingMap'))
+
 interface SightingListProps {
   sightings: UfoSighting[]
 }
@@ -33,7 +37,18 @@ function SightingList({ sightings }: SightingListProps) {
         <ul className="sighting-list">
           {sightings.map((sighting) => (
             <li className="sighting-list__item" key={sighting.id}>
-              <SightingMap sighting={sighting} />
+              {/* The placeholder has the map's size, so the text doesn't
+                  move when the map arrives. */}
+              <Suspense
+                fallback={
+                  <div
+                    className="sighting-map sighting-list__map-placeholder"
+                    aria-hidden="true"
+                  />
+                }
+              >
+                <SightingMap sighting={sighting} />
+              </Suspense>
               <article className="sighting-list__content">
                 <div className="sighting-list__topline">
                   <h2>
diff --git a/frontend/src/tests/SightingList.test.tsx b/frontend/src/tests/SightingList.test.tsx
index 9db7c21..bae75c3 100644
--- a/frontend/src/tests/SightingList.test.tsx
+++ b/frontend/src/tests/SightingList.test.tsx
@@ -9,7 +9,7 @@ vi.mock('../components/SightingMap', () => ({
 }))
 
 describe('SightingList', () => {
-  it('renders sightings, formatted fields, and detail links', () => {
+  it('renders sightings, formatted fields, and detail links', async () => {
     render(
       <MemoryRouter initialEntries={['/?q=Texas']}>
         <SightingList sightings={[mockSightings[0]]} />
@@ -23,7 +23,8 @@ describe('SightingList', () => {
     expect(screen.getByText('cylinder')).toBeInTheDocument()
     expect(screen.getByText('45 min')).toBeInTheDocument()
     expect(screen.getByText(mockSightings[0].comments)).toBeInTheDocument()
-    expect(screen.getByTestId('sighting-map')).toBeInTheDocument()
+    // The map is lazy-loaded, so it appears after the first render.
+    expect(await screen.findByTestId('sighting-map')).toBeInTheDocument()
   })
 
   it('uses plural result text and explains when no sightings match', () => {

From a7d34626f6fc07474fa0cdc26530842165165d7e Mon Sep 17 00:00:00 2001
From: Thor Tveito <thortve@stud.ntnu.no>
Date: Mon, 12 Oct 2026 14:20:50 +0200
Subject: [PATCH 2/2] Fix: Repair SightingList test after merging main

The merge kept the older test body, which rendered SightingList
without totalCount and the paging props that main now requires, so
the test threw on totalCount.toLocaleString. Use the renderList
helper from main and keep waiting for the lazy-loaded map.

Refs #55

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/tests/SightingList.test.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/tests/SightingList.test.tsx b/frontend/src/tests/SightingList.test.tsx
index 2636b95..bbda2cf 100644
--- a/frontend/src/tests/SightingList.test.tsx
+++ b/frontend/src/tests/SightingList.test.tsx
@@ -37,11 +37,7 @@ function renderList(props: Partial<Props> = {}) {
 
 describe('SightingList', () => {
   it('renders sightings, formatted fields, and detail links', async () => {
-    render(
-      <MemoryRouter initialEntries={['/?q=Texas']}>
-        <SightingList sightings={[mockSightings[0]]} />
-      </MemoryRouter>,
-    )
+    renderList()
 
     expect(screen.getByText('1 result')).toBeInTheDocument()
     expect(
@@ -49,7 +45,9 @@ describe('SightingList', () => {
     ).toHaveAttribute('href', '/sightings/1')
     expect(screen.getByText('cylinder')).toBeInTheDocument()
     expect(screen.getByText('45 min')).toBeInTheDocument()
-    expect(screen.getByText(mockSightings[0].comments)).toBeInTheDocument()
+    expect(
+      screen.getByText(/occurred after a Boy Scout meeting/),
+    ).toBeInTheDocument()
     // The map is lazy-loaded, so it appears after the first render.
     expect(await screen.findByTestId('sighting-map')).toBeInTheDocument()
   })