UI: Task Instance page freezes after Mark-as on main (post-#67212)

[neochaotic]

Under which category would you file this issue?

Airflow Core

Apache Airflow version

main (commit 707e316, post-3.2.2)

What happened and how to reproduce it?

After marking a task instance as failed/success, the UI becomes
unresponsive — buttons and links stop reacting to clicks. The state badge
itself updates correctly (this part was fixed by #67212), but the page
freezes for several seconds and a hard refresh is needed to recover.

DevTools Network shows 3 back-to-back GET /ui/grid/ti_summaries/...
NDJSON stream calls triggered by the new cache-subscriber watcher in
useGridTISummaries.ts. Each stream re-runs setSummariesByRunId(...)
once per emitted line (~14 lines per stream), producing ~42 React state
updates in quick succession on top of an already-busy page render —
which matches the user-observed freeze.

Steps to reproduce

1. Run airflow standalone from main HEAD with examples enabled.
2. Trigger any DAG (e.g. tutorial_dag) and let a task finish.
3. Open the Task Instance page.
4. Open DevTools → Network → filter Fetch/XHR.
5. Click the ✓/✗ menu → mark as failed → confirm.
6. Observe: 3 tutorial_dag?run_ids=... (initiator
   useGridTISummariesStream) fire. Page becomes unclickable for ~3-5s.

What you think should happen instead?

The watcher should debounce all mutation-driven invalidations into a
single re-stream, the same way it already attempts via clearTimeout /
setTimeout(..., 0). The page should remain responsive after the mark.

What I have verified

• Reproduces on a clean checkout of main HEAD (707e316), no source
  modifications, vanilla pnpm dev against apache/airflow:3.2.2
  standalone as backend (proxied via vite).
• Network panel confirms 3 stream fetches per mark action, not 1.
• Suspect site:
  airflow-core/src/airflow/ui/src/queries/useGridTISummaries.ts lines
  140-165 — the cache-subscriber watcher added in Improve query validation, including for streaming #67212.
• usePatchTaskInstance.onSuccessFn invalidates several watched keys
  inside a Promise.all. Each invalidation queues a microtask;
  setTimeout(..., 0) runs in a separate macrotask, so the clearTimeout
  debounce may not coalesce when the invalidation events span more than
  one microtask cycle.

Operating System

macOS 15.5

Apache Airflow Provider(s)

n/a

Versions of Apache Airflow Providers

n/a

Deployment

Other Docker-based deployment

Deployment details

apache/airflow:3.2.2 for backend; UI served from pnpm dev on main
HEAD with vite proxy to the standalone container.

Anything else?

• Likely a regression introduced by Improve query validation, including for streaming #67212 (Improve query validation, including for streaming, merged 2026-05-20).
• The original "state badge stays stale" bug from UI: Task instance state badge stays stale after Mark-as action #67883 IS fixed by
  Improve query validation, including for streaming #67212 — this issue tracks the new freeze symptom that appeared
  alongside it.
• A heavier debounce (e.g. 50–100 ms instead of 0 ms) or batching the
  invalidations inside the mutation hook would probably help, but the
  right fix depends on whether the maintainers prefer a tighter
  watcher contract or a different aggregation point.

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[neochaotic]

Additional repro signal: the freeze is fully deterministic — reproduces in every Task Instance page tab opened, every time Mark-as is confirmed. Not an intermittent timing flake.

[neochaotic]

One more signal pointing at the shared hook as the suspect: the same freeze reproduces consistently across 3 different views that share useGridTISummariesStream (Grid, Task Instance page, etc.). The fact that the symptom is identical regardless of which view hosts the page strongly suggests the regression lives in that hook — or in the mutation invalidation contract upstream of it — rather than in any single page component.

[neochaotic]

Additional context for impact tracking: on Airflow 3.2.1 the same hook is consumed by 2 views, whereas on main HEAD a 3rd consumer was added. All consumers exhibit the freeze, so the regression scope grows automatically every time a new view subscribes to grid TI summaries via this hook.

[durgaprasadml]

I investigated this regression and prepared a fix that addresses both the duplicate stream refreshes and the excessive render churn occurring after mutation actions.

The issue appears to come from two compounding factors inside useGridTISummaries.ts:

1. Multiple watched query invalidations can trigger overlapping TI summary stream refreshes.
2. Each NDJSON line currently performs its own setSummariesByRunId(...) state update, which amplifies render pressure significantly on already expensive grid/TI surfaces.

The fix I implemented includes:

• deterministic refresh coalescing for invalidation-driven stream refreshes
• active stream deduplication / stale stream abort handling
• NDJSON chunk buffering with batched React state updates

This preserves the stale badge correctness introduced in #67212 while preventing the UI freeze caused by rapid repeated renders.

I also added tests covering:

• refresh coalescing
• stale stream abort handling
• NDJSON batching behavior
• prevention of duplicate refresh scheduling

Opening PR shortly.