feat: use streaming on loading initial form

jpedroh · Dec 30, 2024 · 8610e4b · 8610e4b
1 parent bfb9229
commit 8610e4b
Showing 1 changed file with 85 additions and 62 deletions.
diff --git a/modules/web-home/src/views/index.tsx b/modules/web-home/src/views/index.tsx
@@ -4,10 +4,10 @@ import { Checkbox } from '@mach/web-shared-ui/checkbox'
 import { Layout } from '@mach/web-shared-ui/layout'
 import { Lead } from '@mach/web-shared-ui/lead'
 import { Select } from '@mach/web-shared-ui/select'
-import { LoaderFunctionArgs } from 'react-router'
+import { Await, LoaderFunctionArgs } from 'react-router'
 import { Form, useLoaderData } from 'react-router'
 
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import { serverOnly$ } from 'vite-env-only/macros'
 
 import { fetchAircraftIcaoCodes } from '../services/fetch-aircraft-icao-codes'
@@ -20,16 +20,16 @@ import { formatAirport } from '../utils/format-airport'
 export const loader = serverOnly$(({ context }: LoaderFunctionArgs) => {
   const db = makeDatabaseConnection(context)
 
-  return Promise.all([
-    fetchCycles(db),
-    fetchCompanies(db),
-    fetchAirports(db),
-    fetchAircraftIcaoCodes(db),
-  ])
+  return {
+    cycles: fetchCycles(db),
+    companies: fetchCompanies(db),
+    airports: fetchAirports(db),
+    aircraftIcaoCodes: fetchAircraftIcaoCodes(db),
+  }
 })
 
 export function HomePage() {
-  const [cycles, companies, airports, aircraftIcaoCodes] =
+  const { cycles, companies, airports, aircraftIcaoCodes } =
     useLoaderData<typeof loader>()
   const [errorMessage, setErrorMessage] = useState('')
 
@@ -47,67 +47,90 @@ export function HomePage() {
 
   return (
     <Layout>
-      <Lead>To begin, fill at least one of the following fields.</Lead>
+      <Suspense fallback={<Lead>Loading...</Lead>}>
+        <Lead>To begin, fill at least one of the following fields.</Lead>
 
-      <Form
-        className="flex flex-col gap-4 w-full max-w-sm"
-        action="/search"
-        method="GET"
-        onSubmit={validateForm}
-      >
-        <Select
-          label={'Cycle'}
-          name="cycle"
-          defaultItems={cycles.map((cycle) => ({ id: cycle, name: cycle }))}
-          defaultSelectedKey={cycles[0]}
-        />
+        <Form
+          className="flex flex-col gap-4 w-full max-w-sm"
+          action="/search"
+          method="GET"
+          onSubmit={validateForm}
+        >
+          <Await resolve={cycles}>
+            {(cycles) => (
+              <Select
+                label={'Cycle'}
+                name="cycle"
+                defaultItems={cycles.map((cycle) => ({
+                  id: cycle,
+                  name: cycle,
+                }))}
+                defaultSelectedKey={cycles[0]}
+              />
+            )}
+          </Await>
 
-        <Select
-          label={'Departure ICAO'}
-          name="departureIcao"
-          defaultItems={airports.map((airport) => ({
-            id: airport.id,
-            name: formatAirport(airport),
-          }))}
-        />
+          <Await resolve={airports}>
+            {(airports) => (
+              <>
+                <Select
+                  label={'Departure ICAO'}
+                  name="departureIcao"
+                  defaultItems={airports.map((airport) => ({
+                    id: airport.id,
+                    name: formatAirport(airport),
+                  }))}
+                />
 
-        <Select
-          label={'Arrival ICAO'}
-          name="arrivalIcao"
-          defaultItems={airports.map((airport) => ({
-            id: airport.id,
-            name: formatAirport(airport),
-          }))}
-        />
+                <Select
+                  label={'Arrival ICAO'}
+                  name="arrivalIcao"
+                  defaultItems={airports.map((airport) => ({
+                    id: airport.id,
+                    name: formatAirport(airport),
+                  }))}
+                />
+              </>
+            )}
+          </Await>
 
-        <Select
-          label={'Company'}
-          name="company"
-          defaultItems={companies.map((company) => ({
-            id: company,
-            name: company,
-          }))}
-        />
+          <Await resolve={companies}>
+            {(companies) => (
+              <Select
+                label={'Company'}
+                name="company"
+                defaultItems={companies.map((company) => ({
+                  id: company,
+                  name: company,
+                }))}
+              />
+            )}
+          </Await>
 
-        <Select
-          label={'Aircraft'}
-          name="aircraftIcaoCode"
-          defaultItems={aircraftIcaoCodes.map((aircraftIcaoCode) => ({
-            id: aircraftIcaoCode,
-            name: aircraftIcaoCode,
-          }))}
-        />
+          <Await resolve={aircraftIcaoCodes}>
+            {(aircraftIcaoCodes) => (
+              <Select
+                label={'Aircraft'}
+                name="aircraftIcaoCode"
+                defaultItems={aircraftIcaoCodes.map((aircraftIcaoCode) => ({
+                  id: aircraftIcaoCode,
+                  name: aircraftIcaoCode,
+                }))}
+              />
+            )}
+          </Await>
 
-        <Checkbox name="onlyCurrent" label="Show only current flights." />
+          <Checkbox name="onlyCurrent" label="Show only current flights." />
 
-        {errorMessage && (
-          <p role="alert" className="bg-red-600 text-white p-4">
-            {errorMessage}
-          </p>
-        )}
+          {errorMessage && (
+            <p role="alert" className="bg-red-600 text-white p-4">
+              {errorMessage}
+            </p>
+          )}
 
-        <Button type="submit">Search flights</Button>
-      </Form>
+          <Button type="submit">Search flights</Button>
+        </Form>
+      </Suspense>
     </Layout>
   )
 }