Non-Blocking Tabs with useTransition

'use client';

import { useState, useTransition } from 'react';

const tabs = ['overview', 'activity', 'settings'] as const;
type Tab = (typeof tabs)[number];

export function DashboardTabs() {
  const [activeTab, setActiveTab] = useState<Tab>('overview');
  const [isPending, startTransition] = useTransition();

  function selectTab(tab: Tab) {
    startTransition(() => {
      setActiveTab(tab);
    });
  }

  return (
    <section>
      <nav aria-label="Dashboard sections">
        {tabs.map((tab) => (
          <button
            key={tab}
            type="button"
            aria-pressed={activeTab === tab}
            onClick={() => selectTab(tab)}
          >
            {tab}
          </button>
        ))}
      </nav>

      <div aria-busy={isPending}>
        {isPending && <p>Updating view…</p>}
        <ExpensivePanel tab={activeTab} />
      </div>
    </section>
  );
}

function ExpensivePanel({ tab }: { tab: Tab }) {
  return <div>Current tab: {tab}</div>;
}