style: add skeletons to paymentId and deviceId pages ♻️

app/(dashboard)/payments/[paymentId]/loading.tsx

@@ -0,0 +1,63 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableRow,
+} from "@/components/ui/table";
+
+export default function PaymentLoading() {
+  return (
+    <div className="mx-2">
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4">
+        <Skeleton className="h-8 w-48" />
+      </div>
+      <div className="flex flex-col gap-4 mt-7 w-full border rounded-md border-dashed title-bg py-3 px-2 mb-3">
+        <Skeleton className="h-5 w-36" />
+      </div>
+      <div className="flex flex-col gap-3 w-full">
+        {Array.from({ length: 1 }).map((_, i) => (
+          <Skeleton
+            key={`${i + 1}`}
+            className="w-full border border-gray-300 h-13 rounded-sm"
+          />
+        ))}
+        <div className="pb-4 w-full gap-4 flex sm:flex-row flex-col items-start justify-start">
+          <div className="my-1 w-full flex items-center justify-between p-2 text-sm text-foreground border rounded">
+            <Table>
+              <TableBody className="">
+                <TableRow>
+                  <TableCell>Payment created</TableCell>
+                  <TableCell className="text-right">
+                    <Skeleton className="h-5 inline-block w-24" />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Total Devices</TableCell>
+                  <TableCell className="text-right text-xl">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Duration</TableCell>
+                  <TableCell className="text-right text-xl">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+              <TableFooter>
+                <TableRow className="">
+                  <TableCell colSpan={1}>Total Due</TableCell>
+                  <TableCell className="text-right text-3xl font-bold">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}