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

import { Settings } from "lucide-react";

export default function SettingsLoading() {
  return (
    <div className="min-h-screen bg-zinc-50/30">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
        <div className="flex items-center gap-3 mb-8">
          <Settings className="w-6 h-6 text-zinc-400 animate-pulse" />
          <div className="h-7 w-28 bg-zinc-200 rounded-lg animate-pulse" />
        </div>
        {[...Array(3)].map((_, i) => (
          <div key={i} className="bg-white rounded-xl p-6 border border-zinc-200 mb-4">
            <div className="h-5 w-32 bg-zinc-200 rounded animate-pulse mb-4" />
            <div className="space-y-3">
              <div className="h-10 bg-zinc-50 rounded-lg animate-pulse" />
              <div className="h-10 bg-zinc-50 rounded-lg animate-pulse" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}