export default function ObservabilityLoading() {
  return (
    <div className="obs-v2 min-h-screen bg-zinc-50 dark:bg-zinc-900">
      {/* Search Section Skeleton */}
      <div className="border-b border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800">
        <div className="max-w-4xl mx-auto px-4 py-4">
          <div className="w-full max-w-2xl mx-auto">
            <div className="flex items-center gap-3">
              <div className="flex-1 h-12 bg-zinc-200 dark:bg-zinc-700 rounded-md animate-pulse" />
              <div className="w-24 h-12 bg-zinc-200 dark:bg-zinc-700 rounded-md animate-pulse" />
            </div>
          </div>
        </div>
      </div>

      {/* Content Skeleton */}
      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Progress skeleton */}
        <div className="mb-8">
          <div className="h-4 w-48 bg-zinc-200 dark:bg-zinc-700 rounded mb-2 animate-pulse" />
          <div className="h-1 w-full bg-zinc-200 dark:bg-zinc-700 rounded animate-pulse" />
        </div>

        {/* Timeline items skeleton */}
        <div className="space-y-8">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex gap-4">
              <div className="w-5 h-5 rounded-full bg-zinc-200 dark:bg-zinc-700 animate-pulse" />
              <div className="flex-1">
                <div className="h-6 w-32 bg-zinc-200 dark:bg-zinc-700 rounded mb-3 animate-pulse" />
                <div className="h-48 bg-zinc-200 dark:bg-zinc-700 rounded animate-pulse" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}