fix(usage): wait for a refresh to answer before settling the page

apps/web/src/state/usage.test.ts

@@ -113,3 +113,37 @@ describe("usage environment scope", () => {
     expect(scope.environments).toEqual(options);
   });
 });
+
+describe("usage refresh settling", () => {
+  it("settles a refresh only after every environment answers the new request", () => {
+    // Retained summaries from the previous request, both refreshing.
+    const macRefreshing = {
+      phase: "connected" as const,
+      isPending: true,
+      summary: {},
+      error: null,
+    };
+    const linuxRefreshing = {
+      phase: "connected" as const,
+      isPending: true,
+      summary: {},
+      error: null,
+    };
+    expect(getEnvironmentUsageLoadingState([macRefreshing, linuxRefreshing])).toEqual({
+      isPending: true,
+      isPartial: false,
+    });
+
+    const macAnswered = { ...macRefreshing, isPending: false };
+    expect(getEnvironmentUsageLoadingState([macAnswered, linuxRefreshing])).toEqual({
+      isPending: false,
+      isPartial: true,
+    });
+
+    const linuxAnswered = { ...linuxRefreshing, isPending: false };
+    expect(getEnvironmentUsageLoadingState([macAnswered, linuxAnswered])).toEqual({
+      isPending: false,
+      isPartial: false,
+    });
+  });
+});

apps/web/src/state/usageEnvironmentScope.ts

@@ -38,13 +38,20 @@ interface EnvironmentUsageLoadingEntry {
 export function isEnvironmentUsageStillReporting(
   environment: EnvironmentUsageLoadingEntry,
 ): boolean {
-  return environment.isPending && environment.summary === null && environment.error === null;
+  // A retained summary does not mean this environment has reported: it is the
+  // previous request's answer, still on screen while the refresh runs.
+  return environment.isPending && environment.error === null;
 }
 
 export function getEnvironmentUsageLoadingState(
   environments: readonly EnvironmentUsageLoadingEntry[],
 ): { readonly isPending: boolean; readonly isPartial: boolean } {
-  const answeredCount = environments.filter((environment) => environment.summary !== null).length;
+  // SWR keeps the previous summary on screen while a refresh is in flight, so
+  // a retained value belongs to the *previous* request. Counting it as an
+  // answer settled a refresh before any environment had reported new numbers.
+  const answeredCount = environments.filter(
+    (environment) => environment.summary !== null && !environment.isPending,
+  ).length;
   const stillReporting = environments.filter(isEnvironmentUsageStillReporting).length;
 
   return {