Deferred Data Loading in React

import { defer, Await } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard')({
  loader: () => {
    return defer({
      critical: fetchCriticalData(), // Awaited
      deferred: fetchSlowData(), // Streamed
    })
  },
  component: Dashboard,
})

function Dashboard() {
  const { critical, deferred } = Route.useLoaderData()

  return (
    <div>
      <h1>{critical.title}</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Await promise={deferred}>
          {(data) => <div>{data.content}</div>}
        </Await>
      </Suspense>
    </div>
  )
}