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