Add infinite scroll on tag search

[aritra24]

Adds infinite scroll in tag search and refetch on field update
closes: #50711

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[pierrejeambrun]

We need to update the PR description. I don't think this alone will entirely solve the issue. (some tags will still be missing beyond the limit)

[aritra24]

Yup, makes sense @pierrejeambrun. Was discussing on slack to add an infinite scroll to the list.

[aritra24]

Added infinite scroll

Screen.Recording.2025-05-20.at.9.58.04.PM.mov

[pierrejeambrun]

I think if you don't want to have some flickering and not have to maintain the list manually (because appending to the list like that will keep in memory possibly thousands and thousands of tags), you should only shift by half a page when you reach the end of scroll, this way you keep some previous items in the list (the one that are overlapping), and smoothly add the rest of the page for further scrolling.

If you scroll back up, you should fire another request to fetch the previous page (which should be cached by react query anyway). So only ever using the data.tags should be enough I think.

[aritra24]

I did do that initially, that was still leading to flickering because it still replaces the old values. I can try again just to confirm though.

[pierrejeambrun]

I did do that initially, that was still leading to flickering because it still replaces the old values. I can try again just to confirm though.

Oh yes, I see, because we then need to remap the 'portion' of the page that was in the view port to still remain unchanged from a display point of view, that might be too complicated and not the way to go. (Or maybe for later, in the meantime I think your approach is good).

Just a few comments to try to improve it.

[pierrejeambrun]

Functionally working, looking good.

Just a few comments.

[aritra24]

Sorry for the delay folks, been a bit occupied the past couple days with life stuff. Getting back to this, I was struggling a bit with the typescript for the infiniteQuery method back when I was looking at it last. Unfortunately either the docs aren't very helpful or my knowledge of typescript is a bit lacking so it might take a bit to figure it out.

[aritra24]

I believe the type issues are fixed now, let me know if there's any other feedback comments you have @pierrejeambrun / @bbovenzi. Again apologies for the delays

[bbovenzi]

lgtm! thanks for taking this on

[github-actions]

Backport failed to create: v3-0-test. View the failure log Run details

Status	Branch	Result
❌	v3-0-test

You can attempt to backport this manually by running:

cherry_picker f6141ff v3-0-test

This should apply the commit to the v3-0-test branch and leave the commit in conflict state marking
the files that need manual conflict resolution.

After you have resolved the conflicts, you can continue the backport process by running:

cherry_picker --continue

[pierrejeambrun]

Manual backport #52714