From 2655f683b5a67b6e6caa98b240deb6469ac6a695 Mon Sep 17 00:00:00 2001
From: Jared Lewis <jared@jared.kiwi.nz>
Date: Mon, 26 Oct 2026 09:48:40 +1100
Subject: [PATCH 1/3] fix(failures): keep loaded passing groups and report
 model list errors

A failed Load More now keeps the groups already loaded and shows the error above the button. A failed models request reports through the page's error alert and retry, without hiding the failures.
---
 .../src/components/failures/passingGroups.tsx | 50 ++++++++++++-------
 .../src/components/failures/useFailures.ts    | 10 ++--
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/failures/passingGroups.tsx b/frontend/src/components/failures/passingGroups.tsx
index 5ba6ada4..866c8586 100644
--- a/frontend/src/components/failures/passingGroups.tsx
+++ b/frontend/src/components/failures/passingGroups.tsx
@@ -53,24 +53,37 @@ function PassingGroupList({
   mipEra: MipEra;
   model?: string;
 }) {
-  const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useInfiniteQuery({
-      ...executionsListRecentExecutionGroupsInfiniteOptions({
-        query: {
-          successful: true,
-          provider_slug: diagnostic.provider.slug,
-          diagnostic_slug: diagnostic.slug,
-          mip_era: mipEra,
-          source_id: model,
-          limit: PAGE_SIZE,
-        },
-      }),
-      initialPageParam: 0,
-      getNextPageParam: (_lastPage, allPages) => nextOffset(allPages),
-    });
+  const {
+    data,
+    error,
+    refetch,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    ...executionsListRecentExecutionGroupsInfiniteOptions({
+      query: {
+        successful: true,
+        provider_slug: diagnostic.provider.slug,
+        diagnostic_slug: diagnostic.slug,
+        mip_era: mipEra,
+        source_id: model,
+        limit: PAGE_SIZE,
+      },
+    }),
+    initialPageParam: 0,
+    getNextPageParam: (_lastPage, allPages) => nextOffset(allPages),
+  });
 
-  if (error) {
-    return <p className="text-sm text-destructive">{apiErrorMessage(error)}</p>;
+  if (!data && error) {
+    return (
+      <div className="space-y-2">
+        <p className="text-sm text-destructive">{apiErrorMessage(error)}</p>
+        <Button variant="outline" size="sm" onClick={() => refetch()}>
+          Try again
+        </Button>
+      </div>
+    );
   }
   if (!data) {
     return (
@@ -90,6 +103,9 @@ function PassingGroupList({
           <PassingGroupItem key={group.id} group={group} />
         ))}
       </ul>
+      {error && (
+        <p className="text-sm text-destructive">{apiErrorMessage(error)}</p>
+      )}
       {hasNextPage && (
         <Button
           variant="ghost"
diff --git a/frontend/src/components/failures/useFailures.ts b/frontend/src/components/failures/useFailures.ts
index 13dd9ca1..95afc4c4 100644
--- a/frontend/src/components/failures/useFailures.ts
+++ b/frontend/src/components/failures/useFailures.ts
@@ -64,17 +64,19 @@ export function useFailures(mipEra: MipEra, model?: string) {
   });
 
   // A failed query that is being retried counts as loading again
-  const failed = [catalog, unsuccessful].filter(
-    (query) => query.isError && !query.isFetching,
-  );
+  const failedQuery = (query: { isError: boolean; isFetching: boolean }) =>
+    query.isError && !query.isFetching;
+  const failed = [catalog, unsuccessful, models].filter(failedQuery);
   const error = failed.length > 0 ? failed[0].error : null;
   const loaded = catalog.data !== undefined && unsuccessful.data !== undefined;
+  // The models only fill in the model picker, so their failure is reported without hiding the page
+  const pageFailed = [catalog, unsuccessful].some(failedQuery);
 
   return {
     catalog: catalog.data?.data,
     unsuccessful: unsuccessful.data,
     models: models.data?.data.map(({ source_id }) => source_id),
-    isLoading: !loaded && error === null,
+    isLoading: !loaded && !pageFailed,
     error,
     retry: () => {
       for (const query of failed) {

From 0d4499f0939bca7849f3b3cc5d61c63f32d24471 Mon Sep 17 00:00:00 2001
From: Jared Lewis <jared@jared.kiwi.nz>
Date: Mon, 26 Oct 2026 09:51:50 +1100
Subject: [PATCH 2/3] docs(changelog): add 161 fragment

---
 changelog/161.fix.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog/161.fix.md

diff --git a/changelog/161.fix.md b/changelog/161.fix.md
new file mode 100644
index 00000000..307b6d17
--- /dev/null
+++ b/changelog/161.fix.md
@@ -0,0 +1 @@
+Loading more passing groups on the failures page no longer hides the groups already loaded when it fails, and a failure to load the model list is now reported with a retry.

From fbde2867862aff8b983d4c79c0f077334731d8b1 Mon Sep 17 00:00:00 2001
From: Jared Lewis <jared@jared.kiwi.nz>
Date: Mon, 26 Oct 2026 09:57:37 +1100
Subject: [PATCH 3/3] feat(failures): swell grey dots while new counts load

Changing the model keeps the previous catalog on screen until the new one arrives, so the dots showed the old filters' health. They now go grey and swell, staggered along each row, until the counts land.
---
 changelog/161.improvement.md                  |  1 +
 .../src/components/failures/health.test.tsx   | 19 ++++++++
 frontend/src/components/failures/health.tsx   | 13 +++++-
 .../failures/providerHealthOverview.tsx       | 44 +++++++++++++++----
 .../src/components/failures/useFailures.ts    |  2 +
 .../src/routes/_app/executions.failures.tsx   |  3 +-
 frontend/src/styles/global.css                | 13 ++++++
 7 files changed, 84 insertions(+), 11 deletions(-)
 create mode 100644 changelog/161.improvement.md
 create mode 100644 frontend/src/components/failures/health.test.tsx

diff --git a/changelog/161.improvement.md b/changelog/161.improvement.md
new file mode 100644
index 00000000..4ffec298
--- /dev/null
+++ b/changelog/161.improvement.md
@@ -0,0 +1 @@
+The diagnostic dots on the failures page now turn grey and gently swell while the counts for new filters load.
diff --git a/frontend/src/components/failures/health.test.tsx b/frontend/src/components/failures/health.test.tsx
new file mode 100644
index 00000000..b78f0d1e
--- /dev/null
+++ b/frontend/src/components/failures/health.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { HEALTH, HealthDot } from "./health";
+
+describe("HealthDot", () => {
+  it("shows the health colour", () => {
+    render(<HealthDot health="failed" />);
+    const dot = screen.getByRole("img", { name: "All failing" });
+    expect(dot).toHaveClass(HEALTH.failed.colour);
+    expect(dot).not.toHaveClass("motion-safe:animate-swell");
+  });
+
+  it("goes grey and swells while pending, hiding the stale health", () => {
+    render(<HealthDot health="failed" pending />);
+    const dot = screen.getByRole("img", { name: "Updating" });
+    expect(dot).toHaveClass(HEALTH.not_run.colour, "motion-safe:animate-swell");
+    expect(dot).not.toHaveClass(HEALTH.failed.colour);
+  });
+});
diff --git a/frontend/src/components/failures/health.tsx b/frontend/src/components/failures/health.tsx
index 1d35f8a3..e1ccf14d 100644
--- a/frontend/src/components/failures/health.tsx
+++ b/frontend/src/components/failures/health.tsx
@@ -1,3 +1,4 @@
+import type React from "react";
 import type { DiagnosticHealth } from "@/lib/failures";
 import { cn } from "@/lib/utils";
 
@@ -28,20 +29,28 @@ export const HEALTH = {
   { label: string; description: string; colour: string }
 >;
 
+/** A diagnostic's health, or a grey swelling dot while `pending` new counts */
 export function HealthDot({
   health,
+  pending = false,
   className,
+  style,
 }: {
   health: DiagnosticHealth;
+  pending?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }) {
   return (
     <span
       role="img"
-      aria-label={HEALTH[health].label}
+      aria-label={pending ? "Updating" : HEALTH[health].label}
+      style={style}
       className={cn(
         "inline-block size-3 shrink-0 rounded-full",
-        HEALTH[health].colour,
+        pending
+          ? cn(HEALTH.not_run.colour, "motion-safe:animate-swell")
+          : HEALTH[health].colour,
         className,
       )}
     />
diff --git a/frontend/src/components/failures/providerHealthOverview.tsx b/frontend/src/components/failures/providerHealthOverview.tsx
index b7ba5bf3..8fb21ea5 100644
--- a/frontend/src/components/failures/providerHealthOverview.tsx
+++ b/frontend/src/components/failures/providerHealthOverview.tsx
@@ -31,15 +31,32 @@ function groupByProvider(diagnostics: DiagnosticFailures[]): ProviderGroup[] {
   return [...groups.values()];
 }
 
+/** Offsets each dot's swell so a row ripples rather than pulsing in step */
+const SWELL_STAGGER_MS = 60;
+
 function DiagnosticDot({
   failures,
   filters,
+  updating,
+  index,
 }: {
   failures: DiagnosticFailures;
   filters?: FailureFilters;
+  updating: boolean;
+  index: number;
 }) {
   const { diagnostic } = failures;
-  const dot = <HealthDot health={failures.health} />;
+  const dot = (
+    <HealthDot
+      health={failures.health}
+      pending={updating}
+      style={
+        updating
+          ? { animationDelay: `${index * SWELL_STAGGER_MS}ms` }
+          : undefined
+      }
+    />
+  );
 
   // A failing diagnostic jumps to its section below, the others open the diagnostic
   return (
@@ -69,12 +86,18 @@ function DiagnosticDot({
       </TooltipTrigger>
       <TooltipContent>
         <p className="font-medium">{diagnostic.name}</p>
-        <p>
-          {failures.total === 0
-            ? "No execution groups"
-            : failureSummary(failures, filters)}
-        </p>
-        <p className="opacity-80">{HEALTH[failures.health].label}</p>
+        {updating ? (
+          <p className="opacity-80">Updating…</p>
+        ) : (
+          <>
+            <p>
+              {failures.total === 0
+                ? "No execution groups"
+                : failureSummary(failures, filters)}
+            </p>
+            <p className="opacity-80">{HEALTH[failures.health].label}</p>
+          </>
+        )}
       </TooltipContent>
     </Tooltip>
   );
@@ -84,10 +107,13 @@ function DiagnosticDot({
 export function ProviderHealthOverview({
   diagnostics,
   filters,
+  updating = false,
 }: {
   diagnostics: DiagnosticFailures[];
   /** What the failures were narrowed to, named in each dot's summary */
   filters?: FailureFilters;
+  /** The counts are from the previous filters while new ones load, so the dots go grey and swell */
+  updating?: boolean;
 }) {
   return (
     <div className="space-y-4">
@@ -110,11 +136,13 @@ export function ProviderHealthOverview({
                 </p>
               </div>
               <div className="flex flex-wrap gap-1">
-                {diagnostics.map((failures) => (
+                {diagnostics.map((failures, index) => (
                   <DiagnosticDot
                     key={failures.diagnostic.slug}
                     failures={failures}
                     filters={filters}
+                    updating={updating}
+                    index={index}
                   />
                 ))}
               </div>
diff --git a/frontend/src/components/failures/useFailures.ts b/frontend/src/components/failures/useFailures.ts
index 95afc4c4..19e2a24c 100644
--- a/frontend/src/components/failures/useFailures.ts
+++ b/frontend/src/components/failures/useFailures.ts
@@ -77,6 +77,8 @@ export function useFailures(mipEra: MipEra, model?: string) {
     unsuccessful: unsuccessful.data,
     models: models.data?.data.map(({ source_id }) => source_id),
     isLoading: !loaded && !pageFailed,
+    /** The catalog still holds the previous filters' counts while the new ones load */
+    isUpdating: catalog.isPlaceholderData,
     error,
     retry: () => {
       for (const query of failed) {
diff --git a/frontend/src/routes/_app/executions.failures.tsx b/frontend/src/routes/_app/executions.failures.tsx
index 11321c1c..d75c81af 100644
--- a/frontend/src/routes/_app/executions.failures.tsx
+++ b/frontend/src/routes/_app/executions.failures.tsx
@@ -69,7 +69,7 @@ function FailuresPage() {
   const search = Route.useSearch();
   const { model, reason, from, to, passing = false } = search;
   const { mipEra } = useMipEra(search.mip_era);
-  const { catalog, unsuccessful, models, isLoading, error, retry } =
+  const { catalog, unsuccessful, models, isLoading, isUpdating, error, retry } =
     useFailures(mipEra, model);
   const navigate = useNavigate({ from: Route.fullPath });
   const updateSearch = (patch: Partial<typeof search>) =>
@@ -215,6 +215,7 @@ function FailuresPage() {
               <ProviderHealthOverview
                 diagnostics={diagnostics}
                 filters={filters}
+                updating={isUpdating}
               />
             </CardContent>
           </Card>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 041955cd..b5e22006 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -109,6 +109,19 @@
   --color-cmip-blue: #000546;
   --color-cmip-mustard: #f2b30d;
   --color-cmip-cyan: #22bfb7;
+
+  --animate-swell: swell 1.6s ease-in-out infinite;
+  @keyframes swell {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1.3);
+      opacity: 1;
+    }
+  }
 }
 
 @layer base {