fix(web): usage page loads in one update instead of shifting

apps/web/src/components/usage/UsagePage.tsx

@@ -211,6 +211,7 @@ export function UsagePage() {
     selectedEnvironments,
     shown,
     isPartial,
+    isWaitingLong,
     refresh,
   } = useUsage(window, selectedEnvironmentIds, hiddenProviders);
   const merged = shown?.merged ?? answeredUsage;
@@ -545,6 +546,7 @@ export function UsagePage() {
                 selectedEnvironments={selectedEnvironments}
                 hiddenProviders={hiddenProviders}
                 refreshingUsage={refreshingUsage}
+                isWaitingLong={isWaitingLong}
                 showChatGptSharing={showChatGptSharing}
                 onSelectModel={selectUsageModel}
               />
@@ -593,6 +595,7 @@ function UsageOverview({
   selectedEnvironments,
   hiddenProviders,
   refreshingUsage,
+  isWaitingLong,
   showChatGptSharing,
   onSelectModel,
 }: {
@@ -606,6 +609,7 @@ function UsageOverview({
   readonly selectedEnvironments: readonly EnvironmentUsageStatus[];
   readonly hiddenProviders: ReadonlySet<UsageProviderKind>;
   readonly refreshingUsage: boolean;
+  readonly isWaitingLong: boolean;
   readonly showChatGptSharing: boolean;
   readonly onSelectModel: (key: string) => void;
 }) {
@@ -649,7 +653,13 @@ function UsageOverview({
   const rankedProviders = rankProvidersByMetric(activeProviders, merged.providers, metric);
 
   return (
-    <div aria-busy={loadingPartial} className="flex flex-col gap-6">
+    <div
+      aria-busy={loadingPartial}
+      className={cn(
+        "flex flex-col gap-6",
+        isWaitingLong ? "[--usage-dim-delay:0ms]" : "[--usage-dim-delay:300ms]",
+      )}
+    >
       {sourceMessages.map((message) => (
         <p key={message} className="mb-4 text-sm text-muted-foreground">
           {message}
@@ -1042,7 +1052,10 @@ function ProviderMark({
 }
 
 function figureClass(loading: boolean) {
-  return cn("transition-opacity", loading && "opacity-40 delay-150");
+  return cn(
+    "transition-opacity",
+    loading && "opacity-40 delay-(--usage-dim-delay) starting:opacity-100",
+  );
 }
 
 function Metric({
@@ -1313,7 +1326,7 @@ function UsageSkeleton() {
             <Skeleton className="h-10 w-36" />
             <Skeleton className="h-4 w-32" />
           </div>
-          {PROVIDER_ORDER.map((provider) => (
+          {PROVIDER_ORDER.slice(0, 3).map((provider) => (
             <div key={provider} className="flex flex-col gap-1">
               <div className="flex min-h-5 items-center justify-between gap-4">
                 <span className="flex items-center gap-2">

apps/web/src/components/usage/UsageProviderChart.tsx

@@ -433,7 +433,10 @@ export function UsageProviderChart({
 
   const toY = (value: number) => valueToY(value, scale.max);
   const seriesClassName = (loading: boolean) =>
-    cn("transition-opacity", loading && "opacity-40 delay-150");
+    cn(
+      "transition-opacity",
+      loading && "opacity-40 delay-(--usage-dim-delay) starting:opacity-100",
+    );
   const format = metric === "tokens" ? formatTokens : formatUsd;
   const formatPeriod = (period: string) =>
     resolution === "hour" ? formatHourShort(period, timeZone, hour12) : formatDayShort(period);

apps/web/src/state/usage.ts

@@ -10,6 +10,7 @@ import {
 } from "@t3tools/contracts";
 import { refreshUsage, usageSummaryInput } from "@t3tools/client-runtime/state/usage";
 import { resolveUsageAccess } from "@t3tools/client-runtime/state/usage-access";
+import * as Effect from "effect/Effect";
 import { AsyncResult, Atom } from "effect/reactivity";
 import { useState } from "react";
 
@@ -84,6 +85,7 @@ export interface UsageView {
   readonly isPending: boolean;
   readonly shown: { readonly window: UsageSummaryInput; readonly merged: MergedUsage } | null;
   readonly isPartial: boolean;
+  readonly isWaitingLong: boolean;
   readonly refresh: (input?: UsageSummaryInput) => Promise<void>;
 }
 
@@ -108,6 +110,18 @@ export function mergeAnsweredUsage(
   return mergeUsage(answered, USAGE_CONTRACT_VERSION);
 }
 
+const settleWindowAtom = Atom.family((loadKey: string) =>
+  Atom.make(Effect.sleep("300 millis").pipe(Effect.as(true))).pipe(
+    Atom.withLabel(`web-usage:settle:${loadKey}`),
+  ),
+);
+const idleSettleWindowAtom = Atom.make(AsyncResult.initial<boolean>());
+
+function useSettleWindow(active: boolean, loadKey: string) {
+  const elapsed = useAtomValue(active ? settleWindowAtom(loadKey) : idleSettleWindowAtom);
+  return active && AsyncResult.isSuccess(elapsed);
+}
+
 const NO_HIDDEN_PROVIDERS: ReadonlySet<UsageProviderKind> = new Set();
 
 function withoutProviders(
@@ -203,6 +217,12 @@ export function useUsage(
     (environment) => environment.summary === null && environment.error === null,
   ).length;
   const isPending = answeredCount === 0 && stillReporting > 0;
+  const selectionKey = selectedEnvironments
+    .map(({ environmentId }) => environmentId)
+    .toSorted()
+    .join(",");
+  const isWaitingLong = useSettleWindow(stillReporting > 0, `${windowKey}|${selectionKey}`);
+  const settled = answeredCount > 0 && (stillReporting === 0 || isWaitingLong);
 
   const [lastAnswered, setLastAnswered] = useState<
     | (NonNullable<UsageView["shown"]> & {
@@ -212,7 +232,7 @@ export function useUsage(
     | null
   >(null);
   if (
-    answeredCount > 0 &&
+    settled &&
     (lastAnswered?.merged !== merged ||
       lastAnswered.window !== input ||
       lastAnswered.selection !== selectedEnvironmentIds ||
@@ -229,18 +249,18 @@ export function useUsage(
     lastAnswered?.selection === selectedEnvironmentIds && lastAnswered.hidden === hiddenProviders
       ? lastAnswered
       : null;
-  const shown =
-    answeredCount > 0
-      ? { window: input, merged }
-      : (kept ?? (isPending ? null : { window: input, merged }));
+  const shown = settled
+    ? { window: input, merged }
+    : (kept ?? (stillReporting > 0 ? null : { window: input, merged }));
 
   return {
     merged,
     environments,
     selectedEnvironments,
     isPending,
     shown,
-    isPartial: answeredCount > 0 && stillReporting > 0,
+    isPartial: settled && stillReporting > 0,
+    isWaitingLong,
     refresh,
   };
 }