app.tsx

import { useState, useTransition } from "react";

function App() {
  const [cities, setCities] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <select
        onChange={(e) => {
          const state = e.currentTarget.value;

          startTransition(async () => {
            const cities = await getCities(state);
            startTransition(() => {
              setCities(cities);
            });
          });
        }}
      >
        <option />
        {Object.keys(stateCitites).map((state) => (
          <option key={state}>{state}</option>
        ))}
      </select>

      <select disabled={isPending}>
        {isPending ? (
          <option>Loading... </option>
        ) : (
          cities.map((city) => <option key={city}>{city}</option>)
        )}
      </select>
    </>
  );
}

const stateCitites: Record<string, string[]> = {
  Utah: ["Salt Lake City", "Provo", "West Valley City"],
  California: ["Los Angeles", "San Francisco", "San Diego"],
  Texas: ["Houston", "Dallas", "Austin"],
  Florida: ["Miami", "Orlando", "Tampa"],
  "New York": ["New York City", "Buffalo", "Rochester"],
};

async function getCities(state: string) {
  await new Promise((res) => setTimeout(res, 150));
  return stateCitites[state] ?? [];
}