From 15836c4d4b78c9d83f9e49bde5957448f3460553 Mon Sep 17 00:00:00 2001
From: Jatoth Adithya Naik <jatothadithyanaik@gmail.com>
Date: Wed, 7 Jan 2026 21:27:10 +0530
Subject: [PATCH] Replace conversation loading spinner with skeleton cards
 (#12230)

Co-authored-by: hieptl <hieptl.developer@gmail.com>
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
---
 .../conversation-card-skeleton.test.tsx       | 12 ++++++++++
 .../conversation-card-skeleton.tsx            | 24 +++++++++++++++++++
 .../conversation-panel/conversation-panel.tsx |  8 +++++--
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.test.tsx
 create mode 100644 frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.tsx

diff --git a/frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.test.tsx b/frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.test.tsx
new file mode 100644
index 0000000000..7301d99aee
--- /dev/null
+++ b/frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { ConversationCardSkeleton } from "./conversation-card-skeleton";
+
+describe("ConversationCardSkeleton", () => {
+  it("renders skeleton card", () => {
+    render(<ConversationCardSkeleton />);
+    expect(
+      screen.getByTestId("conversation-card-skeleton"),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.tsx b/frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.tsx
new file mode 100644
index 0000000000..4cd6fd1bdd
--- /dev/null
+++ b/frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+export function ConversationCardSkeleton() {
+  return (
+    <div
+      data-testid="conversation-card-skeleton"
+      className="relative h-auto w-full p-3.5 border-b border-neutral-600"
+    >
+      <div className="flex items-center justify-between w-full">
+        <div className="flex items-center gap-2 w-full">
+          <div className="skeleton-round h-1.5 w-1.5" />
+          <div className="skeleton h-3 w-2/3 rounded" />
+        </div>
+      </div>
+      <div className="mt-2 flex flex-col gap-1">
+        <div className="skeleton h-2 w-1/2 rounded" />
+        <div className="flex justify-between">
+          <div className="skeleton h-2 w-1/4 rounded" />
+          <div className="skeleton h-2 w-8 rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/conversation-panel/conversation-panel.tsx b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
index c3d4c530dd..03bd1b3b3b 100644
--- a/frontend/src/components/features/conversation-panel/conversation-panel.tsx
+++ b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
@@ -17,6 +17,7 @@ import { useUpdateConversation } from "#/hooks/mutation/use-update-conversation"
 import { displaySuccessToast } from "#/utils/custom-toast-handlers";
 import { ConversationCard } from "./conversation-card/conversation-card";
 import { StartTaskCard } from "./start-task-card/start-task-card";
+import { ConversationCardSkeleton } from "./conversation-card/conversation-card-skeleton";
 
 interface ConversationPanelProps {
   onClose: () => void;
@@ -140,10 +141,13 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
       className="w-full md:w-[400px] h-full border border-[#525252] bg-[#25272D] rounded-lg overflow-y-auto absolute custom-scrollbar-always"
     >
       {isFetching && conversations.length === 0 && (
-        <div className="w-full h-full absolute flex justify-center items-center">
-          <LoadingSpinner size="small" />
+        <div className="space-y-2">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <ConversationCardSkeleton key={index} />
+          ))}
         </div>
       )}
+
       {error && (
         <div className="flex flex-col items-center justify-center h-full">
           <p className="text-danger">{error.message}</p>