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
2026-08-18 09:21:12 +07:00
parent ff8a9c50ae
commit d78d7a0181
10 changed files with 203 additions and 26 deletions
@@ -4,7 +4,7 @@ import { Hash, Search, Sparkles, TrendingUp } from "lucide-react";
import { useEffect, useState } from "react";
import { useAmbient } from "@/components/ambient/ambient-context";
import { Avatar, Badge, GlassPanel, Input } from "@/components/primitives";
import { EmptyState, LoadingState, SectionHeader } from "@/components/shared";
import { EmptyState, SectionHeader, SkeletonRows } from "@/components/shared";
import { useChannels, useMessageSearch, useTopReactors } from "@/hooks";
import { aiTone } from "@/lib/ai-status";
import {
@@ -70,7 +70,7 @@ export function AnalysisView() {
}
/>
{query.trim().length >= 2 && search.isLoading && (
<LoadingState label="Scanning" />
<SkeletonRows rows={6} />
)}
{(search.data ?? []).length === 0 ? (
<EmptyState