chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️

app/(dashboard)/devices/page.tsx

@@ -1,10 +1,10 @@
 import { getServerSession } from "next-auth";
 import { Suspense } from "react";
 import { authOptions } from "@/app/auth";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";
 import AddDeviceDialogForm from "@/components/user/add-device-dialog";
-import DevicesTableSkeleton from "./device-table-skeleton";
 
 export default async function Devices({
 	searchParams,
@@ -53,7 +53,15 @@ export default async function Devices({
 					]}
 				/>
 			</div>
-			<Suspense key={query || page} fallback={<DevicesTableSkeleton />}>
+			<Suspense
+				key={query || page}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Device Name", "Mac Address", "Vendor", "#"]}
+						length={10}
+					/>
+				}
+			>
 				<DevicesTable parentalControl={false} searchParams={searchParams} />
 			</Suspense>
 		</div>