Repository navigation
UI: Prevent list page flicker when applying filters #71979
Description
What happened
When filters are added or removed on list pages using the shared DataTable, the page visibly flickers. The header, search and filter controls, and surrounding layout move while the filtered results are loading.
This is visible on the Dags page and other list pages.
Expected behavior
The header, search and filter controls, and surrounding layout should remain stable while filtered results load.
Check the video starting at 18 seconds.
Feedback_search_bar_airflow.mov
Airflow version
Current main.
Activity
rjgoyln commentedon Aug 24, 2026
Hi @shivaam! I’ve opened PR #72005 to address this issue. (I've also attached a video in the PR demonstrating the smoother UI.)
I found that the flicker came from three layout shifts: the row count unmounting during queries, disappearing scrollbars, and skeleton loaders changing column widths.
The first two are now fixed in the shared components. For the third, Dags and Assets now keep their existing results while fetching new filters, matching
DagRunsandTaskInstances. A progress bar is also shown during the fetch to indicate that the data is updating without causing additional layout shifts.Initial page loads may still reflow slightly due to content-driven column widths, but filter changes should now be much smoother.
Thanks for the feedback, and please let me know if any further adjustments would be helpful!