Refactor code structure for improved readability and maintainability

src/app/loading.tsx

@@ -1,13 +1,30 @@
-import { Loader2 } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
 
+// Kendi loading dosyası olmayan tüm rotalar için genel sayfa iskeleti:
+// spinner yerine başlık, metin ve kart bloklarının yer tutucuları —
+// içerik gelince zıplama olmaz.
 export default function Loading() {
   return (
-    <main
-      aria-live="polite"
-      className="flex min-h-[60vh] flex-col items-center justify-center gap-3"
-    >
-      <Loader2 className="size-8 animate-spin text-primary" aria-hidden />
-      <p className="text-sm text-slate-500">Yükleniyor…</p>
+    <main aria-live="polite" className="mx-auto w-full max-w-6xl px-4 py-12">
+      {/* Rozet + başlık + alt metin */}
+      <Skeleton className="h-6 w-44 rounded-full" />
+      <Skeleton className="mt-5 h-10 w-3/4 max-w-2xl" />
+      <Skeleton className="mt-3 h-10 w-1/2 max-w-md" />
+      <Skeleton className="mt-5 h-5 w-2/3 max-w-lg" />
+      <Skeleton className="mt-2 h-5 w-1/2 max-w-sm" />
+
+      {/* Form / aksiyon şeridi */}
+      <div className="mt-8 flex max-w-xl flex-col gap-3 sm:flex-row">
+        <Skeleton className="h-12 flex-1 rounded-lg" />
+        <Skeleton className="h-12 w-full rounded-lg sm:w-44" />
+      </div>
+
+      {/* Kart bloklar */}
+      <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-40 w-full rounded-2xl" />
+        ))}
+      </div>
     </main>
   );
 }