feat: add loading skeleton for devices table and improve payment processing logic

app/(dashboard)/devices/page.tsx

@@ -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>