Merge pull request #305 from saurabhhhcodes/frontend/skeleton-loading-states-275

frontend/src/app/dashboard/page.tsx

@@ -66,6 +66,7 @@ export default function DashboardPage() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [viewerOpen, setViewerOpen] = useState(true);
   const [connectionError, setConnectionError] = useState("");
+  const [documentsLoading, setDocumentsLoading] = useState(true);
 
     // Auth guard
   useEffect(() => {
@@ -86,6 +87,7 @@ export default function DashboardPage() {
 
   // Load documents
   const loadDocuments = useCallback(async () => {
+    setDocumentsLoading(true);
     try {
       const data = await api.get<{ documents?: DocInfo[]; items?: DocInfo[] }>(
         "/api/v1/documents/"
@@ -99,6 +101,8 @@ export default function DashboardPage() {
           ? CONNECTION_ERROR_BANNER_MESSAGE
           : `⚠️ ${message}`
       );
+    } finally {
+      setDocumentsLoading(false);
     }
   }, []);
 
@@ -152,6 +156,7 @@ export default function DashboardPage() {
     <DocumentSidebar
       documents={documents}
       activeDoc={activeDoc}
+      loading={documentsLoading}
       onSelectDoc={(doc) => {
         setActiveDoc(doc);
         setPdfPage(1);

frontend/src/components/chat/ChatPanel.tsx

@@ -6,6 +6,7 @@ import type { DocInfo } from "@/app/dashboard/page";
 import { api, API_BASE } from "@/lib/api";
 import { useChatStore, type ChatMsg, type SourceChunk } from "@/store/chat-store";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import MessageBubble from "./MessageBubble";
 import SourceCard from "./SourceCard";
@@ -57,6 +58,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   const input = useChatStore((state) => state.input);
   const streaming = useChatStore((state) => state.streaming);
   const isTyping = useChatStore((state) => state.isTyping);
+  const historyLoading = useChatStore((state) => state.historyLoading);
   const activeSessionId = useChatStore((state) => state.activeSessionId);
   const setMessages = useChatStore((state) => state.setMessages);
   const setInput = useChatStore((state) => state.setInput);
@@ -74,6 +76,8 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   const prevDocId = useRef<string | null>(null);
   const exportMenuRef = useRef<HTMLDivElement>(null);
 
+  const showEmptyState = messages.length === 0 && !isTyping && !historyLoading;
+
   useEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
@@ -397,8 +401,24 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   return (
     <div className="h-full flex flex-col">
       {/* ── Chat Messages ──────────────────────────── */}
-        <div className="flex-1 px-4 overflow-y-auto custom-scrollbar">
-          {messages.length === 0 && !isTyping ? (
+      <div className="flex-1 px-4 overflow-y-auto custom-scrollbar" aria-busy={historyLoading}>
+        {historyLoading ? (
+          <div className="py-6 space-y-5 max-w-3xl mx-auto" aria-label="Loading chat history">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <div
+                key={index}
+                className={cn("flex gap-3", index % 2 === 0 ? "justify-end" : "justify-start")}
+              >
+                {index % 2 !== 0 && <Skeleton className="mt-1 h-8 w-8 rounded-full" />}
+                <div className={cn("space-y-2", index % 2 === 0 ? "w-2/3" : "w-3/4")}>
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-5/6" />
+                  <Skeleton className="h-4 w-2/3" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : showEmptyState ? (
           <div className="h-full flex flex-col items-center justify-center py-20">
             <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4">
               <MessageSquare className="w-8 h-8 text-primary/60" />

frontend/src/components/document/DocumentSidebar.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import type { DocInfo } from "@/app/dashboard/page";
 import { api } from "@/lib/api";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
@@ -19,11 +20,34 @@ import { toast } from "sonner";
 interface Props {
   documents: DocInfo[];
   activeDoc: DocInfo | null;
+  loading?: boolean;
   onSelectDoc: (doc: DocInfo) => void;
   onDocumentsChange: () => void;
 }
 
-export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc, onDocumentsChange }: Props) {
+function DocumentListSkeleton() {
+  return (
+    <div className="space-y-2 pb-3" aria-hidden="true">
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index} className="rounded-lg border border-sidebar-border/60 p-2.5">
+          <div className="flex items-start gap-2.5">
+            <Skeleton className="mt-0.5 h-4 w-4 rounded-full bg-sidebar-accent" />
+            <div className="min-w-0 flex-1 space-y-2">
+              <Skeleton className="h-4 w-4/5 bg-sidebar-accent" />
+              <Skeleton className="h-3 w-full bg-sidebar-accent/80" />
+              <div className="flex gap-2">
+                <Skeleton className="h-3 w-10 bg-sidebar-accent/70" />
+                <Skeleton className="h-3 w-12 bg-sidebar-accent/70" />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function DocumentSidebar({ documents = [], activeDoc, loading = false, onSelectDoc, onDocumentsChange }: Props) {
   const { t } = useTranslation();
   const [uploading, setUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
@@ -155,12 +179,16 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
       {/* ── Documents List ──────────────────────────── */}
       <div className="px-3 pt-3 pb-1">
         <h3 className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
-          {t("documents.documentsTitle", { count: documents.length })}
+          {loading
+            ? t("documents.documentsTitle", { count: "..." })
+            : t("documents.documentsTitle", { count: documents.length })}
         </h3>
       </div>
 
-      <ScrollArea className="flex-1 px-3 overflow-auto">
-        {documents.length === 0 ? (
+      <ScrollArea className="flex-1 px-3 overflow-auto" aria-busy={loading}>
+        {loading ? (
+          <DocumentListSkeleton />
+        ) : documents.length === 0 ? (
           <div className="text-center py-12">
             <FolderOpen className="w-8 h-8 mx-auto text-muted-foreground/40 mb-3" />
             <p className="text-sm text-muted-foreground">{t("documents.noDocuments")}</p>

frontend/src/components/layout/Header.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useAuth } from "@/lib/auth";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
   DropdownMenu,
@@ -56,6 +57,7 @@ export default function Header({
   const { theme, setTheme } = useTheme();
   const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   const [sheetOpen, setSheetOpen] = useState(false);
+  const [workspaceLoading, setWorkspaceLoading] = useState(false);
   const workspace = useWorkspaceStore((s) => s.workspace);
   const setWorkspace = useWorkspaceStore((s) => s.setWorkspace);
 
@@ -69,6 +71,7 @@ export default function Header({
 
   const fetchDocumentsForWorkspace = async (id: string) => {
     // Placeholder: simulate fetching documents for the selected workspace
+    setWorkspaceLoading(true);
     try {
       // Attempt a real API call if available; otherwise this will fail silently
       const res = await api.get(`/api/v1/documents?workspace=${encodeURIComponent(id)}`).catch(() => null);
@@ -77,6 +80,8 @@ export default function Header({
       // e.g. documentStore.setDocuments(res || [])
     } catch (err) {
       console.warn("Failed to fetch documents for workspace", id, err);
+    } finally {
+      setWorkspaceLoading(false);
     }
   };
 
@@ -152,9 +157,18 @@ export default function Header({
           {/* Workspace switcher */}
           <DropdownMenu>
             <DropdownMenuTrigger className="flex items-center h-8 gap-2 px-2 rounded-md hover:bg-accent transition-colors cursor-pointer">
-              <Briefcase className="w-4 h-4" />
-              <span className="text-sm hidden sm:inline">{WORKSPACES.find((w) => w.id === workspace)?.label}</span>
-              <ChevronDown className="w-3 h-3" />
+              {workspaceLoading ? (
+                <>
+                  <Skeleton className="h-4 w-4 rounded-sm" />
+                  <Skeleton className="hidden h-4 w-16 sm:block" />
+                </>
+              ) : (
+                <>
+                  <Briefcase className="w-4 h-4" />
+                  <span className="text-sm hidden sm:inline">{WORKSPACES.find((w) => w.id === workspace)?.label}</span>
+                  <ChevronDown className="w-3 h-3" />
+                </>
+              )}
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-40">
               {WORKSPACES.map((w) => (
@@ -247,4 +261,4 @@ export default function Header({
 </aside>
     </>
   );
-}
+}

frontend/src/store/chat-store.ts

@@ -32,12 +32,14 @@ interface ChatStore {
   input: string;
   streaming: boolean;
   isTyping: boolean;
+  historyLoading: boolean;
   sessions: ChatSession[];
   activeSessionId: string | null;
   setMessages: (value: Setter<ChatMsg[]>) => void;
   setInput: (value: Setter<string>) => void;
   setStreaming: (value: Setter<boolean>) => void;
   setIsTyping: (value: Setter<boolean>) => void;
+  setHistoryLoading: (value: Setter<boolean>) => void;
   setSessions: (value: Setter<ChatSession[]>) => void;
   setActiveSessionId: (value: Setter<string | null>) => void;
   fetchSessions: () => Promise<void>;
@@ -56,6 +58,7 @@ export const useChatStore = create<ChatStore>((set, get) => ({
   input: "",
   streaming: false,
   isTyping: false,
+  historyLoading: false,
   sessions: [],
   activeSessionId: null,
 
@@ -75,6 +78,10 @@ export const useChatStore = create<ChatStore>((set, get) => ({
     set((state) => ({ isTyping: resolveValue(value, state.isTyping) }));
   },
 
+  setHistoryLoading(value) {
+    set((state) => ({ historyLoading: resolveValue(value, state.historyLoading) }));
+  },
+
   setSessions(value) {
     set((state) => ({ sessions: resolveValue(value, state.sessions) }));
   },
@@ -150,11 +157,14 @@ export const useChatStore = create<ChatStore>((set, get) => ({
   },
 
   async fetchSessionHistory(id) {
+    set({ historyLoading: true });
     try {
       const data = await api.get<{ messages: ChatMsg[] }>(`/api/v1/chat/history/session/${id}`);
       set({ messages: data.messages });
     } catch (err) {
       console.error("Failed to fetch session history:", err);
+    } finally {
+      set({ historyLoading: false });
     }
   },
 
@@ -164,6 +174,7 @@ export const useChatStore = create<ChatStore>((set, get) => ({
       input: "",
       streaming: false,
       isTyping: false,
+      historyLoading: false,
       sessions: [],
       activeSessionId: null,
     });