From f8774f51e64ff6861faef1d7835244759f12b251 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Wed, 24 Sep 2025 17:46:04 +0500
Subject: [PATCH] =?UTF-8?q?style:=20add=20skeletons=20to=20paymentId=20and?=
 =?UTF-8?q?=20deviceId=20pages=20=E2=99=BB=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(dashboard)/parental-control/loading.tsx | 37 +++++++++++---------
 app/(dashboard)/top-ups/loading.tsx          | 37 +++++++++++---------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/app/(dashboard)/parental-control/loading.tsx b/app/(dashboard)/parental-control/loading.tsx
index b28a7e1..2167cfd 100644
--- a/app/(dashboard)/parental-control/loading.tsx
+++ b/app/(dashboard)/parental-control/loading.tsx
@@ -2,21 +2,24 @@ import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function LoadingComponent() {
-	return (
-		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<Skeleton className="w-48 h-8" />
-				<Skeleton className="w-20 h-8" />
-			</div>
-			<div
-				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
-			>
-				<DevicesTableSkeleton
-					headers={["Device Name", "Mac Address", "Vendor", "#"]}
-					length={10}
-				/>
-			</div>
-		</div>
-	);
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-20 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Device Name", "Mac Address", "Vendor", "#"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/app/(dashboard)/top-ups/loading.tsx b/app/(dashboard)/top-ups/loading.tsx
index 8788ddc..fa2ad55 100644
--- a/app/(dashboard)/top-ups/loading.tsx
+++ b/app/(dashboard)/top-ups/loading.tsx
@@ -2,21 +2,24 @@ import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { Skeleton } from "@/components/ui/skeleton";
 
 export default function LoadingComponent() {
-	return (
-		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<Skeleton className="w-48 h-8" />
-				<Skeleton className="w-20 h-8" />
-			</div>
-			<div
-				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
-			>
-				<DevicesTableSkeleton
-					headers={["Details", "Status", "Amount"]}
-					length={10}
-				/>
-			</div>
-		</div>
-	);
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-20 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Details", "Status", "Amount"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
 }