search

konveyor / tackle2-ui

Tackle (2nd generation) UI component.
Apache License 2.0
8 stars 43 forks source link

:sparkles: Use InfiniteScroller pattern for the Task Drawer #2049

Closed rszwajko closed 2 months ago

rszwajko commented 3 months ago

Implement InfiniteScroller based on oVirt VmPortal implementation and use it to fetch additional tasks in the Task Drawer. Key features:

  1. fetch data using useInfiniteQuery from React Query
  2. track sentinel visibility using IntersectionObserver API
  3. monitor item count to prevent extra fetchMore calls

Resolves: https://github.com/konveyor/tackle2-ui/issues/1973 Reference-Url: https://github.com/oVirt/ovirt-web-ui/blob/dfe0c4b8c92638f6e41b9fe0b09e0d07509618ae/src/components/VmsList/index.js#L50 Signed-off-by: Radoslaw Szwajkowski rszwajko@redhat.com

codecov[bot] commented 3 months ago

Codecov Report

Attention: Patch coverage is 13.72549% with 88 lines in your changes missing coverage. Please review.

Project coverage is 42.15%. Comparing base (b654645) to head (d54892f). Report is 224 commits behind head on main.

Files with missing lines Patch % Lines
.../app/components/task-manager/TaskManagerDrawer.tsx 11.11% 32 Missing :warning:
...mponents/InfiniteScroller/useVisibilityTracker.tsx 7.69% 24 Missing :warning:
client/src/app/queries/tasks.ts 10.00% 18 Missing :warning:
...p/components/InfiniteScroller/InfiniteScroller.tsx 26.31% 14 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2049 +/- ## ========================================== + Coverage 39.20% 42.15% +2.95% ========================================== Files 146 174 +28 Lines 4857 5577 +720 Branches 1164 1376 +212 ========================================== + Hits 1904 2351 +447 - Misses 2939 3210 +271 - Partials 14 16 +2 ``` | [Flag](https://app.codecov.io/gh/konveyor/tackle2-ui/pull/2049/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=konveyor) | Coverage Δ | | |---|---|---| | [client](https://app.codecov.io/gh/konveyor/tackle2-ui/pull/2049/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=konveyor) | `42.15% <13.72%> (+2.95%)` | :arrow_up: | | [server](https://app.codecov.io/gh/konveyor/tackle2-ui/pull/2049/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=konveyor) | `?` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=konveyor#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

rszwajko commented 3 months ago

Infinite scroller inside Task Drawer

(queries with 2 sec delay to show loading progress)

https://github.com/user-attachments/assets/58d8bdaa-f973-4a8e-b747-1a079a16cf7f

rszwajko commented 2 months ago

@sjd78 @ibolton336 the current version contains log entries and a test page size (2 items) - it makes things easier to test during the review. I'll remove it before the merge.

rszwajko commented 2 months ago

@sjd78 @ibolton336 I've removed the extra logs. There is also one code change - extra wrapper to avoid setting the state on unmounted component (which theoretically may happen as IntersectionObserver is browser API)