peter
b5573b62d1
Replaces the plain "Loading…" text in every R3 loading branch with a single shared LoadingState (a spinning lucide Loader2 in the accent colour + label, centered, role=status/aria-live) — one component so all loads read the same and can be swapped for skeletons later in one place. Applied across Feed, Channels, ChannelDiscovery, AuditLog, NotificationsPanel, Messages, Scheduler, Stats, PlexBrowse (grid + subviews), PlexPlaylistView, ConfigPanel, DownloadCenter, AdminUsers, ChatThread. Left the small "load more" footer and lazy Suspense fallbacks as-is.
68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { AlertTriangle, Loader2 } from "lucide-react";
|
|
|
|
// Centered loading state: a spinning accent ring + an optional label. The single shared loading
|
|
// visual for a page/section's first load, so all of them read the same (and can be swapped for
|
|
// skeletons later in one place). `role=status`/`aria-live` announces it to screen readers.
|
|
export function LoadingState({ label, className = "" }: { label?: ReactNode; className?: string }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
className={`flex flex-col items-center gap-3 py-10 text-sm text-muted ${className}`}
|
|
role="status"
|
|
aria-live="polite"
|
|
>
|
|
<Loader2 className="w-6 h-6 animate-spin text-accent" aria-hidden />
|
|
<span>{label ?? t("common.loading")}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Centered inline status line for a page/section's loading and error(+retry) states, in the house
|
|
// style (mirrors Playlists' error block). Text-only by design — R3's goal is to stop pages
|
|
// rendering an error or a still-loading fetch AS an "empty" state, not to add skeletons. The
|
|
// `role=status`/`aria-live` also gives screen readers the state change (the app had zero live
|
|
// regions before).
|
|
export function StateMessage({
|
|
children,
|
|
onRetry,
|
|
tone = "muted",
|
|
className = "",
|
|
}: {
|
|
children: ReactNode;
|
|
onRetry?: () => void;
|
|
tone?: "muted" | "error";
|
|
className?: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
className={`flex flex-col items-center gap-3 py-10 text-sm text-muted ${className}`}
|
|
// An error is announced promptly (assertive); a plain loading line is polite.
|
|
role={tone === "error" ? "alert" : "status"}
|
|
aria-live={tone === "error" ? "assertive" : "polite"}
|
|
>
|
|
<span className="inline-flex items-center gap-2 text-center">
|
|
{tone === "error" && <AlertTriangle className="w-4 h-4 shrink-0 text-red-400" />}
|
|
{children}
|
|
</span>
|
|
{onRetry && (
|
|
<button
|
|
type="button"
|
|
onClick={onRetry}
|
|
className="px-3 py-1.5 rounded-lg border border-border text-xs text-muted hover:text-fg hover:border-accent transition"
|
|
>
|
|
{t("common.retry")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// The honest-state convention every page now follows: check `isError && <no data>` BEFORE the empty
|
|
// branch, so a failed fetch renders this message (with Retry) instead of the page's "empty" text
|
|
// — the R3 bug where a backend restart read as "No channels". The `&& <no data>` guard matters: a
|
|
// transient refetch error while data is already on screen keeps the data rather than blanking it to
|
|
// an error. `StateMessage` is the shared building block pages wire into their loading/empty ternary.
|