safaehar opened a new pull request, #76978:
URL: https://github.com/apache/airflow/pull/76978
On an initial load, the Dag, run and task pages send their first requests
from their components. Those requests wait for the root route loader (the UI
config) and the first render. On a run page with the JavaScript cached, the
data requests start 370–460 ms into the load:
| Step | Ends at |
|-|-|
| HTML | ~35 ms |
| Main bundle executes | ~110 ms |
| `/ui/config` (root route loader) | ~150–230 ms |
| First render (one long task, ~120 ms) | ~270–360 ms |
| Page data requests start | ~270–460 ms |
Requests that need another response wait longer. The task log needs the task
instance's try number, so it starts only after the task instance request, which
itself waits for the first render.
React Router runs the loaders of all matched routes in parallel. This adds
loaders that start those requests while the app loads:
- `dags/:dagId`: the Dag, its details and its latest run.
- `dags/:dagId/runs/:runId` and the task instance routes (mapped or not):
the Dag and the run.
- The task instance Logs tab, and the default tab when the user's default
task instance tab is Logs: the task instance, then the log of its current try.
The loaders use the generated `prefetchUse…` / `ensureUse…Data` helpers, so
each query key is the one the page's own query builds, and the page renders
from the cache. They don't wait for their requests and never fail, so they
don't delay or break rendering. If a page's query ends up with another key, it
just sends its own request, as it does today.
What the loaders leave to the page:
- URLs with `try_number`, `region_id` or `region_index`, so historical tries
and loop iterations keep their current behavior.
- Tries that have not started (`try_number` 0, no state, `up_for_retry`),
for which the Logs tab sends no log request either.
- The Grid's runs: their page size depends on the panel width, which a
loader can't know.
### Measurements
I measured an equivalent change on an Airflow 3.3 deployment (the same
loaders, plus a prefetch of the Grid's first page, which this PR doesn't
include). It was an A/B of the same UI sources built without and with the
loaders, with the JavaScript cached, against a real API server. Median of 7
loads, ms from navigation start:
| Page | Page data starts | Page's slowest request done | LCP |
|-|-|-|-|
| Dag (`/details`) | 371 → 94 | 521 → 342 | 560 → 480 |
| Run (`ti_summaries`) | 457 → 93 | 907 → 686 | 608 → 500 |
| Task (log) | 414 → 94 | 1,299 → 839 | 532 → 568 |
No request was sent twice with the loaders: every prefetched key matched the
page's. The run page's `ti_summaries` gain came partly from the Grid prefetch,
so expect less there with this PR. The Dag and task page gains come from
requests this PR keeps.
### Testing
- New `routePrefetch.test.ts` (12 tests), covering:
- the cached keys equal the hooks' keys;
- the log uses the task instance's try and loop coordinates;
- the map index from the route;
- URLs with `try_number` or loop coordinates are skipped;
- tries that haven't started are skipped;
- the default-tab setting;
- a failed task instance request is swallowed.
- The full UI test suite passes (`pnpm test`: 283 files, 2,427 tests), along
with `pnpm build`, `oxfmt`, `oxlint`, `eslint` and `tsc`.
No visual change: the pages render the same content, earlier.
---
##### Was generative AI tooling used to co-author this PR?
- [X] Yes (please specify the tool below)
Generated-by: Claude Code (Claude Opus 5.5) following [the
guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions)
---
* Read the **[Pull Request
Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)**
for more information. Note: commit author/co-author name and email in commits
become permanently public when merged.
* For fundamental code changes, an Airflow Improvement Proposal
([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals))
is needed.
* When adding dependency, check compliance with the [ASF 3rd Party License
Policy](https://www.apache.org/legal/resolved.html#category-x).
* For significant user-facing changes create newsfragment:
`{pr_number}.significant.rst`, in
[airflow-core/newsfragments](https://github.com/apache/airflow/tree/main/airflow-core/newsfragments).
You can add this file in a follow-up commit after the PR is created so you
know the PR number.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
