github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2026-03-22 13:47:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace conversation loading spinner with skeleton cards (#12230)

Browse Source 
Co-authored-by: hieptl <hieptl.developer@gmail.com>
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
This commit is contained in:
Jatoth Adithya Naik
2026-01-07 21:27:10 +05:30
committed by GitHub
parent 20eb9bd3c5
commit 15836c4d4b
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.test.tsx Normal file
View File

@@ -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();
});
});

24
frontend/src/components/features/conversation-panel/conversation-card/conversation-card-skeleton.tsx Normal file
View File

@@ -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>
);
}

8
frontend/src/components/features/conversation-panel/conversation-panel.tsx
View File

@@ -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>