web/app/dashboard-pages/compare/loading.tsx

import { GitCompare } from "lucide-react";

export default function CompareLoading() {
  return (
    <div className="min-h-screen bg-zinc-50/30">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
        <div className="flex items-center gap-3 mb-8">
          <GitCompare className="w-6 h-6 text-zinc-400 animate-pulse" />
          <div className="h-7 w-44 bg-zinc-200 rounded-lg animate-pulse" />
        </div>
        <div className="grid md:grid-cols-2 gap-6">
          {[...Array(2)].map((_, i) => (
            <div key={i} className="bg-white rounded-xl p-4 border border-zinc-200">
              <div className="h-3 w-24 bg-zinc-100 rounded animate-pulse mb-3" />
              <div className="h-[280px] bg-zinc-50 rounded-lg animate-pulse" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}