From 610d8c17079e7316b173befa1a1181a202bb19d8 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 10 May 2026 12:46:11 +0200
Subject: [PATCH] refactor(PBI-77): dashboard + settings loading on shadcn
 Skeleton (T-901)

Replace hand-rolled animate-pulse + bg-border divs with the shadcn <Skeleton>
component for consistent bg-muted color and pulse timing across all five
loading.tsx files. No layout-shift: heights, widths, and rounded radii are
preserved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/(app)/dashboard/loading.tsx | 10 ++++++----
 app/(app)/settings/loading.tsx  | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/(app)/dashboard/loading.tsx b/app/(app)/dashboard/loading.tsx
index 656e323..40800ab 100644
--- a/app/(app)/dashboard/loading.tsx
+++ b/app/(app)/dashboard/loading.tsx
@@ -1,10 +1,12 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
 export default function Loading() {
   return (
-    <div className="p-6 max-w-4xl mx-auto w-full animate-pulse">
-      <div className="h-6 w-32 bg-border rounded mb-6" />
+    <div className="p-6 max-w-4xl mx-auto w-full">
+      <Skeleton className="h-6 w-32 mb-6" />
       <div className="grid gap-3">
-        {[1, 2, 3].map(i => (
-          <div key={i} className="h-20 bg-border/50 rounded-xl" />
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-20 rounded-xl" />
         ))}
       </div>
     </div>
diff --git a/app/(app)/settings/loading.tsx b/app/(app)/settings/loading.tsx
index 07f3dd9..11488b0 100644
--- a/app/(app)/settings/loading.tsx
+++ b/app/(app)/settings/loading.tsx
@@ -1,9 +1,11 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
 export default function Loading() {
   return (
-    <div className="p-6 max-w-2xl mx-auto w-full space-y-4 animate-pulse">
-      <div className="h-6 w-28 bg-border rounded" />
-      {[1, 2, 3, 4].map(i => (
-        <div key={i} className="h-28 bg-border/50 rounded-xl" />
+    <div className="p-6 max-w-2xl mx-auto w-full space-y-4">
+      <Skeleton className="h-6 w-28" />
+      {[1, 2, 3, 4].map((i) => (
+        <Skeleton key={i} className="h-28 rounded-xl" />
       ))}
     </div>
   )