fix(ui): add a content-shaped loading skeleton to the analytics dashboard (#6949)

app.analytics.tsx's StateBoundary had no loadingSkeleton, falling through to
the generic centered spinner -- the same gap #6816 fixed for
app.operator.tsx, relative to app.runs.tsx/miner-panel.tsx/
maintainer-panel.tsx/dead-letter-queue-panel.tsx.

Adds AnalyticsDashboardSkeleton mirroring the real layout (header + window
toggle, stat grid, card sections) and wires it via loadingSkeleton on the
existing StateBoundary.

Closes #6817

Author: galuis116

apps/loopover-ui/src/routes/app.analytics.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+// #6817: app.analytics.tsx's StateBoundary had no loadingSkeleton, falling through to the generic spinner
+// -- the same gap #6816 fixed for app.operator.tsx.
+const { useApiResource } = vi.hoisted(() => ({ useApiResource: vi.fn() }));
+vi.mock("@/lib/api/use-api-resource", () => ({
+  useApiResource: (...args: unknown[]) => useApiResource(...args),
+}));
+
+import { ProductAnalytics } from "@/routes/app.analytics";
+
+describe("ProductAnalytics loading skeleton (#6817)", () => {
+  it("shows a content-shaped skeleton (not the generic spinner) while the dashboard loads", () => {
+    useApiResource.mockReturnValue({
+      status: "loading",
+      data: null,
+      error: null,
+      loadedAt: null,
+      reload: () => {},
+    });
+
+    const { container } = render(<ProductAnalytics />);
+    // The custom skeleton replaces the generic LoadingState — neither its title nor its spinner shows.
+    expect(screen.queryByText("Loading analytics…")).toBeNull();
+    expect(container.querySelector(".animate-spin")).toBeNull();
+    // The placeholder renders animate-pulse blocks approximating the dashboard's header + stat + card grid.
+    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(1);
+  });
+
+  it("does not show the skeleton once the dashboard has real data", () => {
+    useApiResource.mockReturnValue({
+      status: "ready",
+      data: { metrics: [{ label: "Active repos", value: "12", delta: "+2" }], noiseReduction: [] },
+      error: null,
+      loadedAt: "2026-07-17T00:00:00.000Z",
+      reload: () => {},
+    });
+
+    const { container } = render(<ProductAnalytics />);
+    expect(screen.getByText("Usage & value analytics")).toBeTruthy();
+    expect(container.querySelectorAll(".animate-pulse").length).toBe(0);
+  });
+});

apps/loopover-ui/src/routes/app.analytics.tsx

@@ -5,6 +5,7 @@ import { BoundaryBadge, Stat, StatusPill } from "@/components/site/control-primi
 import { TableScroll } from "@/components/site/data-table";
 import { RefreshMeta } from "@/components/site/refresh-meta";
 import { StateActionButton, StateBoundary } from "@/components/site/state-views";
+import { Skeleton } from "@/components/ui/skeleton";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { TrendChart } from "@/components/site/trend-chart";
 import {
@@ -142,7 +143,32 @@ type OperatorDashboard = {
   slopCalibration?: SlopOutcomeCalibration;
 };
 
-function ProductAnalytics() {
+function AnalyticsDashboardSkeleton() {
+  return (
+    <div className="space-y-8" aria-hidden>
+      <div className="flex flex-wrap items-end justify-between gap-3">
+        <div className="space-y-2">
+          <Skeleton className="h-3 w-20 rounded-token" />
+          <Skeleton className="h-7 w-72 rounded-token" />
+          <Skeleton className="h-4 w-96 rounded-token" />
+        </div>
+        <Skeleton className="h-8 w-40 rounded-token" />
+      </div>
+      <section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 3 }, (_, index) => (
+          <Skeleton key={index} className="h-24 w-full rounded-token" />
+        ))}
+      </section>
+      <section className="grid gap-6 lg:grid-cols-2">
+        {Array.from({ length: 4 }, (_, index) => (
+          <Skeleton key={index} className="h-48 w-full rounded-token" />
+        ))}
+      </section>
+    </div>
+  );
+}
+
+export function ProductAnalytics() {
   const [windowDays, setWindowDays, windowHydrated] = useLocalStorage<AnalyticsWindowDays>(
     ANALYTICS_WINDOW_STORAGE_KEY,
     DEFAULT_ANALYTICS_WINDOW_DAYS,
@@ -168,6 +194,7 @@ function ProductAnalytics() {
       onRetry={dashboard.reload}
       onRefresh={dashboard.reload}
       loadingTitle="Loading analytics…"
+      loadingSkeleton={<AnalyticsDashboardSkeleton />}
       emptyTitle="No analytics yet"
       emptyDescription="Aggregate adoption and command usage metrics will appear once the API has data."
       errorDescription={dashboard.status === "error" ? dashboard.error : undefined}