add loading state

Author: Dylan Huang

vite-app/src/App.tsx

@@ -33,6 +33,7 @@ const App = observer(() => {
     ws.onopen = () => {
       console.log("Connected to file watcher");
       state.isConnected = true;
+      state.isLoading = true; // Set loading when connection opens
       reconnectAttemptsRef.current = 0; // Reset reconnect attempts on successful connection
     };
 
@@ -48,18 +49,21 @@ const App = observer(() => {
           console.log("initialize_logs", rows);
           state.upsertRows(rows);
         } else if (update.type === "log") {
+          state.isLoading = true; // Set loading for individual log updates
           const row: EvaluationRow = EvaluationRowSchema.parse(update.row);
           console.log("log", row);
           state.upsertRows([row]);
         }
       } catch (error) {
         console.error("Failed to parse WebSocket message:", error);
+        state.isLoading = false; // Clear loading state on error
       }
     };
 
     ws.onclose = (event) => {
       console.log("Disconnected from file watcher", event.code, event.reason);
       state.isConnected = false;
+      state.isLoading = false; // Clear loading state on disconnect
 
       // Attempt to reconnect if not a normal closure
       if (
@@ -73,6 +77,7 @@ const App = observer(() => {
     ws.onerror = (error) => {
       console.error("WebSocket error:", error);
       state.isConnected = false;
+      state.isLoading = false; // Clear loading state on error
     };
   };
 
@@ -99,6 +104,7 @@ const App = observer(() => {
 
   // Manual refresh handler
   const handleManualRefresh = () => {
+    state.isLoading = true; // Set loading when manually refreshing
     if (wsRef.current) {
       try {
         wsRef.current.onclose = null; // Prevent triggering reconnect logic

vite-app/src/GlobalState.tsx

@@ -29,6 +29,8 @@ export class GlobalState {
   // Pagination configuration
   currentPage: number;
   pageSize: number;
+  // Loading state
+  isLoading: boolean = true;
 
   constructor() {
     // Load pivot config from localStorage or use defaults
@@ -65,7 +67,10 @@ export class GlobalState {
         return { ...DEFAULT_PAGINATION_CONFIG, ...parsed };
       }
     } catch (error) {
-      console.warn("Failed to load pagination config from localStorage:", error);
+      console.warn(
+        "Failed to load pagination config from localStorage:",
+        error
+      );
     }
     return { ...DEFAULT_PAGINATION_CONFIG };
   }
@@ -82,10 +87,13 @@ export class GlobalState {
   // Save pagination configuration to localStorage
   private savePaginationConfig() {
     try {
-      localStorage.setItem("paginationConfig", JSON.stringify({
-        currentPage: this.currentPage,
-        pageSize: this.pageSize,
-      }));
+      localStorage.setItem(
+        "paginationConfig",
+        JSON.stringify({
+          currentPage: this.currentPage,
+          pageSize: this.pageSize,
+        })
+      );
     } catch (error) {
       console.warn("Failed to save pagination config to localStorage:", error);
     }
@@ -98,7 +106,9 @@ export class GlobalState {
   }
 
   // Update pagination configuration and save to localStorage
-  updatePaginationConfig(updates: Partial<{ currentPage: number; pageSize: number }>) {
+  updatePaginationConfig(
+    updates: Partial<{ currentPage: number; pageSize: number }>
+  ) {
     if (updates.currentPage !== undefined) {
       this.currentPage = updates.currentPage;
     }
@@ -138,6 +148,7 @@ export class GlobalState {
   }
 
   upsertRows(dataset: EvaluationRow[]) {
+    this.isLoading = true;
     dataset.forEach((row) => {
       if (!row.execution_metadata?.rollout_id) {
         return;
@@ -147,6 +158,7 @@ export class GlobalState {
     // Reset to first page when dataset changes
     this.currentPage = 1;
     this.savePaginationConfig();
+    this.isLoading = false;
   }
 
   toggleRowExpansion(rolloutId?: string) {

vite-app/src/components/Dashboard.tsx

@@ -49,6 +49,24 @@ const EmptyState = ({ onRefresh }: { onRefresh: () => void }) => {
   );
 };
 
+const LoadingState = () => {
+  return (
+    <div className="bg-white border border-gray-200 p-8 text-center">
+      <div className="max-w-sm mx-auto">
+        <div className="text-gray-400 mb-4">
+          <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-600 mx-auto"></div>
+        </div>
+        <h3 className="text-sm font-medium text-gray-900 mb-2">
+          Loading evaluation data...
+        </h3>
+        <p className="text-xs text-gray-500">
+          Connecting to the server and loading data
+        </p>
+      </div>
+    </div>
+  );
+};
+
 const Dashboard = observer(({ onRefresh }: DashboardProps) => {
   const expandAll = () => state.setAllRowsExpanded(true);
   const collapseAll = () => state.setAllRowsExpanded(false);
@@ -81,7 +99,9 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
       </div>
 
       {/* Content Area */}
-      {state.totalCount === 0 ? (
+      {state.isLoading ? (
+        <LoadingState />
+      ) : state.totalCount === 0 ? (
         <EmptyState onRefresh={onRefresh} />
       ) : (
         <div className="bg-white border border-gray-200">