Perf: Lazy-load secondary pages and the Leaflet map

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 />

frontend/src/components/SightingList.css

@@ -50,6 +50,10 @@
   min-height: 180px;
 }
 
+.sighting-list__map-placeholder {
+  background: var(--code-bg);
+}
+
 .sighting-list__content {
   min-width: 0;
 }

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 {
@@ -6,9 +7,12 @@ import {
   formatLocation,
   formatShape,
 } 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[]
   /** Matches across all pages, not just the sightings shown. */
@@ -78,7 +82,18 @@ function SightingList({
         <ul className="sighting-list" aria-busy={loading}>
           {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>

frontend/src/tests/SightingList.test.tsx

@@ -36,7 +36,7 @@ function renderList(props: Partial<Props> = {}) {
 }
 
 describe('SightingList', () => {
-  it('renders sightings, formatted fields, and detail links', () => {
+  it('renders sightings, formatted fields, and detail links', async () => {
     renderList()
 
     expect(screen.getByText('1 result')).toBeInTheDocument()
@@ -48,7 +48,8 @@ describe('SightingList', () => {
     expect(
       screen.getByText(/occurred after a Boy Scout meeting/),
     ).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('shows how many of the total matches are loaded', () => {