fix(*): added the loading in the dataset list

Author: Ayush8923

app/(routes)/evaluations/page.tsx

@@ -53,6 +53,7 @@ function SimplifiedEvalContent() {
 
   // Stored datasets
   const [storedDatasets, setStoredDatasets] = useState<Dataset[]>([]);
+  const [isDatasetsLoading, setIsDatasetsLoading] = useState(false);
 
   // Evaluation config state
   const [selectedDatasetId, setSelectedDatasetId] = useState<string>(() => {
@@ -86,6 +87,7 @@ function SimplifiedEvalContent() {
       console.error("No selected API key found for loading datasets");
       return;
     }
+    setIsDatasetsLoading(true);
     try {
       const response = await fetch("/api/evaluations/datasets", {
         method: "GET",
@@ -96,6 +98,8 @@ function SimplifiedEvalContent() {
       setStoredDatasets(Array.isArray(data) ? data : data.data || []);
     } catch (e) {
       console.error("Failed to load datasets:", e);
+    } finally {
+      setIsDatasetsLoading(false);
     }
   }, [apiKeys, selectedKeyId]);
 
@@ -426,6 +430,7 @@ function SimplifiedEvalContent() {
                 setUploadedFile(null);
               }}
               storedDatasets={storedDatasets}
+              isDatasetsLoading={isDatasetsLoading}
               apiKeys={apiKeys}
               selectedKeyId={selectedKeyId}
               loadStoredDatasets={loadStoredDatasets}

app/components/evaluations/DatasetsTab.tsx

@@ -6,6 +6,7 @@ import { APIKey } from "@/app/lib/types/credentials";
 import { Dataset } from "@/app/(routes)/datasets/page";
 import { useToast } from "@/app/components/Toast";
 import EvalDatasetDescription from "./EvalDatasetDescription";
+import Loader from "@/app/components/Loader";
 
 export interface DatasetsTabProps {
   leftPanelWidth: number;
@@ -22,6 +23,7 @@ export interface DatasetsTabProps {
   handleCreateDataset: () => void;
   resetForm: () => void;
   storedDatasets: Dataset[];
+  isDatasetsLoading: boolean;
   apiKeys: APIKey[];
   selectedKeyId: string;
   loadStoredDatasets: () => void;
@@ -43,6 +45,7 @@ export default function DatasetsTab({
   handleCreateDataset,
   resetForm,
   storedDatasets,
+  isDatasetsLoading,
   apiKeys,
   selectedKeyId,
   loadStoredDatasets,
@@ -559,7 +562,11 @@ export default function DatasetsTab({
             </h3>
           </div>
 
-          {storedDatasets.length === 0 ? (
+          {isDatasetsLoading ? (
+            <div className="p-16 flex justify-center">
+              <Loader size="md" message="Loading datasets..." />
+            </div>
+          ) : storedDatasets.length === 0 ? (
             <div className="p-16 text-center">
               <svg
                 className="w-12 h-12 mx-auto mb-3"