Applying a filter updates results without full page reload

A directory that full-reloads on every filter click feels broken on any connection slower than corporate fiber. Each reload throws away scroll position, re-runs layout shift, refetches unchanged header and footer chunks, and adds 200-800ms of perceived latency per filter adjustment. Users who would have iterated through three or four filter combinations abandon after one. Modern directories live or die on the speed at which users can refine results — a full-page refresh loop is the single largest UX regression in this category.

Fetch filtered results from a JSON API endpoint and update component state in place. Keep the URL in sync for sharability and back/forward navigation, but use router.push with client routing, not a hard navigation. Edit components/FilteredListings.tsx:

const handleFilterChange = async (next) => {
  setLoading(true)
  const res = await fetch(`/api/listings?${new URLSearchParams(next)}`)
  setResults((await res.json()).listings)
  setLoading(false)
}