feat(frontend): skeleton loading states, empty-state glow, light-mode polish
- Add shared skeleton building blocks (SkeletonHero, SkeletonMetricRow, SkeletonPanel, SkeletonRows) and wire them into every view's initial loading branch, replacing bare spinners for a cohesive shimmering shell. - Polish EmptyState with a glow-ring icon chip instead of a flat icon. - Harden .light theme: color-scheme, tuned scrollbar + selection for pale canvas. Dark/light theme toggle (next-themes) already persisted in TopBar.
This commit is contained in:
1 parent
ff8a9c50ae
commit
d78d7a0181
10 files changed
+203
-26
No files matched your search
@@ -24,9 +24,11 @@ import {
|
||||
} from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
LoadingState,
|
||||
MetricTile,
|
||||
SectionHeader,
|
||||
SkeletonMetricRow,
|
||||
SkeletonPanel,
|
||||
SkeletonRows,
|
||||
} from "@/components/shared";
|
||||
import { useModerationActions, useModerationStats } from "@/hooks";
|
||||
import { formatNumber, formatRelativeTime } from "@/lib/format";
|
||||
@@ -92,7 +94,14 @@ export function ModerationView({
|
||||
}, [failedRate, ambient]);
|
||||
|
||||
if (error && !stats) return <ErrorState error={error} />;
|
||||
if (!stats && isLoading) return <LoadingState label="Reading log" />;
|
||||
if (!stats && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<SkeletonMetricRow cols={4} />
|
||||
<SkeletonPanel rows={5} />
|
||||
<SkeletonRows rows={6} />
|
||||
</div>
|
||||
);
|
||||
if (!stats) return <ErrorState error={error ?? new Error("No data")} />;
|
||||
|
||||
const statusOpts: SelectOption[] = [
|
||||
|
||||
Reference in new issue
Block a user