Improvement/UX- use skeleton for dataset image grid loading

dataset_explorer/app/datasets/DatasetsContent.tsx

@@ -147,10 +147,10 @@ export function DatasetsContent({
     });
   };
   const handlePageSizeChange = (size: number) => {
-    setImagesPage(1); 
-    setImagesPerPage(size)
-    cache.invalidate(selected)
-};
+    setImagesPage(1);
+    setImagesPerPage(size);
+    cache.invalidate(selected);
+  };
 
   const handleCreateDataset = () => {
     if (!newName || !user) return;

dataset_explorer/app/datasets/sections/DatasetImagesCard.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Spinner from "@components/ui/spinner";
 import DatasetImageGrid from "@components/DatasetsPage/DatasetImageGrid";
 import type { ImageThumbnail } from "@lib/types";
 import type { Dispatch, SetStateAction } from "react";
+import { DatasetImagesSkeleton } from "@components/DatasetsPage/DatasetImagesSkeleton";
 
 export function DatasetImagesCard({
   thumbnails,
@@ -15,14 +15,17 @@ export function DatasetImagesCard({
   selected,
   imagesLoading,
   handleDeleteImages,
-  onPageSizeChange
+  onPageSizeChange,
 }: DatasetImagesCardProps) {
   return (
     <div className="bg-[#121212] border border-[#1F1F1F] rounded-lg p-6">
       <h3 className="text-xl text-white mb-4">Images in dataset</h3>
 
       {imagesLoading ? (
-        <Spinner text="Loading your images" />
+        <DatasetImagesSkeleton
+          text="Loading your dataset..."
+          perPage={imagesPerPage}
+        />
       ) : !selected ? (
         <div className="text-sm text-[#6B6B6B]">
           Select a dataset to view images.

dataset_explorer/components/DatasetsPage/DatasetImageGrid.tsx

@@ -29,7 +29,7 @@ type Props = {
   onNextPage: () => void;
 };
 
-const PAGE_SIZE_OPTIONS = [12, 20, 50]
+const PAGE_SIZE_OPTIONS = [12, 20, 50];
 
 function DatasetImageGrid({
   thumbnails,

dataset_explorer/components/DatasetsPage/DatasetImagesSkeleton.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Skeleton } from "@components/ui/skeleton";
+
+export interface DatasetImagesSkeletonProps {
+  text?: string;
+  perPage?: number;
+}
+
+export function DatasetImagesSkeleton({
+  text = "Loading your dataset...",
+  perPage = 12,
+}: DatasetImagesSkeletonProps) {
+  return (
+    <div className="mb-6">
+      {/* Top bar */}
+      <div className="flex items-center justify-between mb-3 px-1">
+        <div className="text-sm text-[#A3A3A3]">{text}</div>
+
+        <div className="flex gap-2">
+          {/* Fake delete button */}
+          <Skeleton className="h-9 w-28 bg-[#1F1F1F]" />
+          {/* Fake clear button */}
+          <Skeleton className="h-9 w-20 bg-[#1F1F1F]" />
+        </div>
+      </div>
+
+      {/* Grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+        {Array.from({ length: perPage }).map((_, i) => (
+          <div
+            key={i}
+            className="relative w-full overflow-hidden rounded-lg border border-[#1F1F1F] bg-[#0E0E0E]"
+          >
+            {/* Thumbnail rectangle */}
+            <Skeleton className="aspect-[4/3] w-full bg-[#1F1F1F]" />
+
+            {/* Footer area */}
+            <div className="p-2 flex justify-between items-center">
+              <Skeleton className="h-3 w-16 bg-[#1F1F1F]" />
+              <Skeleton className="h-3 w-10 bg-[#1F1F1F]" />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Pagination area */}
+      <div className="mt-4 flex items-center justify-between">
+        <Skeleton className="h-4 w-44 bg-[#1F1F1F]" />
+        <div className="flex gap-2">
+          <Skeleton className="h-9 w-16 border border-[#1F1F1F] bg-[#0E0E0E]" />
+          <Skeleton className="h-9 w-16 bg-[#E82127]/60" />
+        </div>
+      </div>
+    </div>
+  );
+}

dataset_explorer/lib/actions/dataset.ts

@@ -78,10 +78,9 @@ export async function fetchImagesForDatasetAction(
     }
 
     const paths = data.map((img) => img.storage_path);
-    const { data: signedURLs, error: signError } =
-      await supabaseServer.storage
-        .from("datasets")
-        .createSignedUrls(paths, 3600);
+    const { data: signedURLs, error: signError } = await supabaseServer.storage
+      .from("datasets")
+      .createSignedUrls(paths, 3600);
 
     if (signError) throw signError;
     const thumbs: ImageThumbnail[] = data.map((img, i) => ({
@@ -91,7 +90,6 @@ export async function fetchImagesForDatasetAction(
     }));
 
     return { thumbnails: thumbs, total: count ?? 0 };
-
   } catch (err: any) {
     return { thumbnails: [], total: 0, error: err?.message ?? String(err) };
   }