- {facetsState !== "ready" &&
}
+ {status}
{facets && facets.years.length > 0 && (
;
- announce?: boolean;
-}) {
+/** The facets still loading, or failed with a way to try again — said once for the whole rail. */
+export function FacetsStatus({ failed, onRetry }: { failed: boolean; onRetry: () => void }) {
const { t } = useTranslation();
- const role = announce ? (state === "error" ? "alert" : "status") : undefined;
+ if (failed)
+ return (
+
+ {t("common.loadError")}
+
+ );
return (
-
- {t(state === "error" ? "common.loadError" : "common.loading")}
+
+ {t("common.loading")}
);
}
diff --git a/frontend/src/modules/plex/PlexSidebar.year.dom.test.tsx b/frontend/src/modules/plex/PlexSidebar.year.dom.test.tsx
index 056d4de8..7f88849e 100644
--- a/frontend/src/modules/plex/PlexSidebar.year.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexSidebar.year.dom.test.tsx
@@ -17,7 +17,7 @@ vi.mock("./plexContext", () => ({
usePlexActions: () => ({ setPlaylistOpen: vi.fn() }),
}));
-import { PlexYearFilter } from "./PlexSidebar";
+import { FacetsStatus, PlexYearFilter } from "./PlexSidebar";
import { EMPTY_PLEX_FILTERS, type PlexFacets } from "../../lib/api";
afterEach(cleanup);
@@ -64,25 +64,14 @@ describe("the Plex rail's Year section", () => {
expect(screen.queryByRole("button", { pressed: true })).toBeNull();
});
- it("says the years are loading, or failed to load, rather than showing none", () => {
- const { rerender } = render(
- {}}
- />,
- );
+ it("says the facets are loading, or failed with a way to try again, rather than showing none", () => {
+ const retry = vi.fn();
+ const { rerender } = render();
expect(screen.getByRole("status").textContent).toBe("common.loading");
- rerender(
- {}}
- />,
- );
- expect(screen.getByRole("alert").textContent).toBe("common.loadError");
+ rerender();
+ expect(screen.getByRole("alert").textContent).toContain("common.loadError");
+ fireEvent.click(screen.getByRole("button", { name: "common.retry" }));
+ expect(retry).toHaveBeenCalledOnce();
});
it("names the range fields", () => {