Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[wip] web/timeline: use tanstack virtual to virtualise timeline #581

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

JadedBlueEyes
Copy link
Contributor

@JadedBlueEyes JadedBlueEyes commented Jan 2, 2025

Seems to work pretty well so far

todo:

lower priority:

  • allow jump-to-event (e.g. replies) to jump to events that have been unloaded by the virtualiser
  • improve performance when adding loaded history to timeline (shifting indexes / pretending to array)

@JadedBlueEyes JadedBlueEyes marked this pull request as draft January 2, 2025 02:52
}
}, [
room.hasMoreHistory, loadHistory,
virtualizer.getVirtualItems(),
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This effect is now ran on every render because loadHistory changes every time (useCallbacks are not there just for fun). Eslint is also complaining about missing dependencies

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be run on every render anyway due to virtualizer.getVirtualItems(). Not sure what to do about this, as it's the suggested way to achieve this effect in https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll, and from what I can see, the actual result of firstItem doesn't change.

web/src/ui/timeline/TimelineView.tsx Outdated Show resolved Hide resolved
web/src/ui/timeline/TimelineView.tsx Outdated Show resolved Hide resolved
web/src/ui/timeline/TimelineView.tsx Show resolved Hide resolved
web/src/ui/timeline/TimelineView.tsx Outdated Show resolved Hide resolved
web/src/ui/timeline/TimelineView.tsx Show resolved Hide resolved
@JadedBlueEyes JadedBlueEyes force-pushed the jade/tanstack-virtual branch from 5decae0 to 7616a55 Compare January 2, 2025 15:33
@JadedBlueEyes JadedBlueEyes force-pushed the jade/tanstack-virtual branch from 7616a55 to 1e339d1 Compare January 3, 2025 15:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants