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:
asepharyana committed 2026-08-18 09:21:12 +07:00
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[] = [