style: add skeletons to paymentId and deviceId pages ♻️

app/(dashboard)/devices/[deviceId]/loading.tsx

@@ -0,0 +1,33 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DeviceLoading() {
+  return (
+    <div>
+      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
+        <div className="flex flex-col space-y-2 justify-between items-start">
+          <Skeleton className="h-8 w-44" />
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <div className="flex items-center gap-2 flex-col">
+          <Skeleton className="h-10 w-32" />
+        </div>
+      </div>
+
+      <div
+        id="user-filters"
+        className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <Skeleton className="h-10 sm:w-64" />
+        {/* <Filter
+        options={sortfilterOptions}
+        defaultOption="asc"
+        queryParamKey="sortBy"
+      /> */}
+      </div>
+      {/* <Suspense key={query} fallback={"loading...."}>
+      <DevicesTable searchParams={searchParams} />
+    </Suspense> */}
+    </div>
+  );
+}

app/(dashboard)/devices/[deviceId]/page.tsx

@@ -1,9 +1,9 @@
+import { redirect } from "next/navigation";
 import ClientErrorMessage from "@/components/client-error-message";
 import Search from "@/components/search";
 import { Badge } from "@/components/ui/badge";
 import { getDevice } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
-import { redirect } from "next/navigation";
 
 export default async function DeviceDetails({
   params,
@@ -25,7 +25,7 @@ export default async function DeviceDetails({
 
   return (
     <div>
-			<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
+      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
         <div className="flex flex-col justify-between items-start">
           <h3 className="text-2xl text-sarLinkOrange font-bold">
             {device?.name}

app/(dashboard)/devices/loading.tsx

@@ -6,7 +6,10 @@ export default function LoadingComponent() {
     <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" />
+        <Skeleton className="w-36 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
       </div>
       <div
         id="user-filters"

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>
+  );
+}

app/(dashboard)/payments/loading.tsx

@@ -8,6 +8,9 @@ export default function LoadingComponent() {
         <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"

components/devices-to-pay.tsx

@@ -78,11 +78,13 @@ export default function DevicesToPay({
           {devices?.map((device) => (
             <div
               key={device.id}
-              className="bg-muted border rounded p-2 flex gap-2 items-center"
+              className="bg-muted border rounded p-2 flex gap-2 items-center motion-preset-fade"
             >
               <div className="flex flex-col">
-                <div className="text-sm font-medium">{device.name}</div>
-                <div className="text-xs text-muted-foreground">
+                <div className="text-sm font-medium motion-preset-slide-up">
+                  {device.name}
+                </div>
+                <div className="text-xs text-muted-foreground motion-preset-slide-up motion-delay-100">
                   {device.mac}
                 </div>
               </div>
@@ -160,8 +162,10 @@ export default function DevicesToPay({
           </TableCaption>
           <TableBody className="">
             <TableRow>
-              <TableCell>Payment created</TableCell>
-              <TableCell className="text-right">
+              <TableCell className="motion-preset-slide-left-sm">
+                Payment created
+              </TableCell>
+              <TableCell className="text-right motion-preset-slide-right-sm">
                 {new Date(payment?.created_at ?? "").toLocaleDateString(
                   "en-US",
                   {
@@ -176,22 +180,31 @@ export default function DevicesToPay({
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Total Devices</TableCell>
-              <TableCell className="text-right text-xl">
+              <TableCell className="motion-preset-slide-left-sm motion-delay-75">
+                Total Devices
+              </TableCell>
+              <TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-75">
                 {devices?.length}
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableCell>Duration</TableCell>
-              <TableCell className="text-right text-xl">
+              <TableCell className="motion-preset-slide-left-sm motion-delay-100">
+                Duration
+              </TableCell>
+              <TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-100">
                 {payment?.number_of_months} Months
               </TableCell>
             </TableRow>
           </TableBody>
           <TableFooter>
             <TableRow className="">
-              <TableCell colSpan={1}>Total Due</TableCell>
-              <TableCell className="text-right text-3xl font-bold">
+              <TableCell
+                className="motion-preset-slide-left-sm motion-delay-150"
+                colSpan={1}
+              >
+                Total Due
+              </TableCell>
+              <TableCell className="text-right text-3xl font-bold motion-preset-slide-right-sm motion-delay-150">
                 {payment?.amount?.toFixed(2)}
               </TableCell>
             </TableRow>

components/wallet-transactions-table.tsx

@@ -67,12 +67,16 @@ export async function WalletTransactionsTable({
       ) : (
         <div>
           <div className="flex gap-4 mb-4 w-full">
-						<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
-							<h5 className="text-lg font-semibold">Total Debit</h5>
+            <div className="bg-red-300 ring-4 ring-red-500/20 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
+              <h5 className="text-lg font-semibold uppercase font-barlow">
+                Total Debit
+              </h5>
               <p>{totalDebit.toFixed(2)} MVR</p>
             </div>
-						<div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
-							<h5 className="text-lg font-semibold">Total Credit</h5>
+            <div className="bg-green-300 ring-4 ring-green-500/20 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
+              <h5 className="text-lg font-semibold uppercase font-barlow">
+                Total Credit
+              </h5>
               <p>{totalCredit.toFixed(2)} MVR</p>
             </div>
           </div>