Add loading spinner and debug logs for file fetch

packages/web/components/ProfileViewer.tsx

@@ -90,12 +90,19 @@ export function ProfileViewer() {
     : "http://localhost:8000";
 
   async function fetchAndDisplayFile(path: string, name: string) {
+    console.log("fetchAndDisplayFile called:", path, name);
     setIsLoadingFile(true);
     try {
-      const res = await fetch(`${API_BASE}${path}`);
+      const url = `${API_BASE}${path}`;
+      console.log("Fetching:", url);
+      const res = await fetch(url);
+      console.log("Response status:", res.status);
       const text = await res.text();
+      console.log("Response length:", text.length);
       const lines = text.trim().split("\n");
+      console.log("Lines count:", lines.length);
       const data = lines.slice(1).map((line) => line.split(","));
+      console.log("Data rows:", data.length);
       setSelectedFile({ name, path, data });
     } catch (err) {
       console.error("Failed to fetch file:", err);
@@ -266,7 +273,14 @@ export function ProfileViewer() {
             </div>
 
             <div className="flex-1 overflow-y-auto p-4">
-              {selectedFile ? (
+              {isLoadingFile ? (
+                <div className="flex items-center justify-center py-20">
+                  <div className="text-center">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+                    <p className="text-muted-foreground">Loading file data...</p>
+                  </div>
+                </div>
+              ) : selectedFile ? (
                 <div className="mb-6 border rounded-lg overflow-hidden">
                   <div className="flex items-center justify-between p-4 bg-blue-50 border-b">
                     <div className="flex items-center gap-3">