diff --git a/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.test.tsx b/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.test.tsx index e42c3d99c9a..3f55b11769c 100644 --- a/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.test.tsx +++ b/ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.test.tsx @@ -236,3 +236,31 @@ it("should display user email correctly", async () => { expect(screen.getByText("user@example.com")).toBeInTheDocument(); }); }); + +it("should show skeleton loaders when isLoading is true", () => { + // Mock loading state + mockUseKeys.mockReturnValue({ + data: null, + isPending: true, + refetch: vi.fn(), + } as any); + + const mockProps = { + teams: [mockTeam], + organizations: [mockOrganization], + onSortChange: vi.fn(), + currentSort: { + sortBy: "created_at", + sortOrder: "desc" as const, + }, + }; + + renderWithProviders(); + + // Check that loading message is shown + expect(screen.getByText("🚅 Loading keys...")).toBeInTheDocument(); + + // Check that actual key data is not shown + expect(screen.queryByText("Test Key Alias")).not.toBeInTheDocument(); + expect(screen.queryByText("Test Team")).not.toBeInTheDocument(); +});