chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️

app/(dashboard)/payments/loading.tsx

@@ -0,0 +1,22 @@
+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", "Duration", "Status", "Amount"]}
+					length={10}
+				/>
+			</div>
+		</div>
+	);
+}

app/(dashboard)/payments/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { PaymentsTable } from "@/components/payments-table";
 
@@ -14,8 +15,8 @@ export default async function Payments({
 
 	return (
 		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<h3 className="text-sarLinkOrange text-2xl">My Payments</h3>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-3 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">My Subscriptions</h3>
 			</div>
 			<div
 				id="user-filters"
@@ -72,7 +73,15 @@ export default async function Payments({
 					]}
 				/>{" "}
 			</div>
-			<Suspense key={query} fallback={"loading...."}>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Details", "Duration", "Status", "Amount"]}
+						length={10}
+					/>
+				}
+			>
 				<PaymentsTable searchParams={searchParams} />
 			</Suspense>
 		</div>