sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-02 09:48:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add loading skeleton for devices table and improve payment processing logic
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 4m30s
Details

Browse Source
This commit is contained in:
i701
2025-04-12 17:01:37 +05:00
parent 067acef49c
commit 0d578c9add
5 changed files with 95 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/(dashboard)/devices/device-table-skeleton.tsx Normal file
View File

@ -0,0 +1,78 @@
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
export default function DevicesTableSkeleton() {
return (
<>
<div className="hidden sm:block">
<Table className="overflow-scroll">
<TableCaption>Table of all devices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Device Name</TableHead>
<TableHead>MAC Address</TableHead>
<TableHead>#</TableHead>
</TableRow>
</TableHeader>
<TableBody className="overflow-scroll">
{Array.from({ length: 10 }).map((_, i) => (
<TableRow key={`${i + 1}`}>
<TableCell>
<Skeleton className="w-full h-10 rounded" />
</TableCell>
<TableCell>
<Skeleton className="w-full h-10 rounded" />
</TableCell>
<TableCell>
<Skeleton className="w-full h-10 rounded" />
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2}>
<Skeleton className="w-full h-4 rounded" />
</TableCell>
<TableCell className="text-muted-foreground">
<Skeleton className="w-20 h-4 rounded" />
</TableCell>
</TableRow>
</TableFooter>
</Table>
</div>
<div className="sm:hidden my-4">
{Array.from({ length: 10 }).map((_, i) => (
<DeviceCardSkeleton key={`${i + 1}`} />
))}
</div>
</>
);
}
function DeviceCardSkeleton() {
return (
<div
className={cn(
"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
)}
>
<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
<Skeleton className="w-32 h-6" />
<Skeleton className="w-36 h-6" />
<Skeleton className="w-32 h-4" />
<Skeleton className="w-40 h-8" />
</div>
</div>
);
}

6
app/(dashboard)/devices/page.tsx
View File

@ -4,6 +4,7 @@ import Search from "@/components/search";
import AddDeviceDialogForm from "@/components/user/add-device-dialog";
import { getServerSession } from "next-auth";
import React, { Suspense } from "react";
import DevicesTableSkeleton from "./device-table-skeleton";
export default async function Devices({
searchParams,
@ -11,11 +12,10 @@ export default async function Devices({
searchParams: Promise<{
query: string;
page: number;
sortBy: string;
status: string;
}>;
}) {
const query = (await searchParams)?.query || "";
const page = (await searchParams)?.page || 1;
const session = await getServerSession(authOptions);
return (
<div>
@ -29,7 +29,7 @@ export default async function Devices({
>
<Search />
</div>
<Suspense key={query} fallback={"loading...."}>
<Suspense key={query || page} fallback={<DevicesTableSkeleton />}>
<DevicesTable parentalControl={false} searchParams={searchParams} />
</Suspense>
</div>