Hook useTransition

'use client'

import { useTransition, useState } from 'react'

export default function DemoPestañas() {
  const [isPending, startTransition] = useTransition()
  const [pestañaActiva, setPestañaActiva] = useState('pestaña1')
  
  const manejarCambioPestaña = (pestaña: string) => {
    startTransition(() => {
      setPestañaActiva(pestaña)
    })
  }
  
  return (
    <div>
      <div className="flex space-x-2">
        {pestañas.map(pestaña => (
          <button
            key={pestaña.id}
            onClick={() => manejarCambioPestaña(pestaña.id)}
            disabled={isPending}
            className={pestañaActiva === pestaña.id ? 'active' : ''}
          >
            {pestaña.etiqueta}
          </button>
        ))}
      </div>
      
      {isPending && <div>Cargando...</div>}
      
      <div className="contenido-pestaña">
        {/* Renderizado de contenido pesado */}
        <ContenidoPesado pestañaId={pestañaActiva} />
      </div>
    </div>
  )
}