fix(ui): withhold the tag list until it resolves

The usage page seeded its tag list as an empty array, so between first
paint and the tag request landing the filter had a resolved-looking empty
list and showed "No tags with usage in this range" for a scope nobody had
measured yet.

Seed it as null instead, which the filter already treats as unresolved and
hides, so the empty state only appears once the list has actually come back.
This commit is contained in:
Yuneng Jiang 2026-08-27 15:38:14 -07:00
parent 21bb011770
commit 13b5c80c90
No known key found for this signature in database
2 changed files with 25 additions and 1 deletions

View file

@ -586,6 +586,30 @@ describe("UsagePage", () => {
});
});
it("should withhold the tag list until it resolves so no empty state is shown while loading", async () => {
let resolveTagList: (tags: Record<string, unknown>) => void = () => {};
mockTagListCall.mockReturnValue(
new Promise((resolve) => {
resolveTagList = resolve;
}) as ReturnType<typeof networking.tagListCall>,
);
renderWithProviders(<UsagePage {...defaultProps} />);
act(() => {
fireEvent.change(screen.getByTestId("usage-view-select"), { target: { value: "tag" } });
});
const entityUsage = await screen.findByTestId("entity-usage");
expect(entityUsage).toHaveAttribute("data-entity-list", "null");
await act(async () => {
resolveTagList({});
});
expect(screen.getByTestId("entity-usage")).toHaveAttribute("data-entity-list", "[]");
});
it("should show tag usage selector option for internal users", async () => {
mockUseAuthorized.mockReturnValue({
isLoading: false,

View file

@ -96,7 +96,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
to: initialToDate,
});
const [allTags, setAllTags] = useState<EntityList[]>([]);
const [allTags, setAllTags] = useState<EntityList[] | null>(null);
const { data: customers = [] } = useCustomers();
const { data: agentsResponse } = useAgents();
const { data: currentUser } = useCurrentUser();