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

Remove Virtuoso from Raven Web app #446

Closed
nikkothari22 opened this issue Sep 7, 2023 · 1 comment · Fixed by #745
Closed

Remove Virtuoso from Raven Web app #446

nikkothari22 opened this issue Sep 7, 2023 · 1 comment · Fixed by #745

Comments

@nikkothari22
Copy link
Member

After a careful regression test, I figured out that Virtuoso has been the main reason why the chat interface lags so much.

  1. From the Virtuoso Docs: https://virtuoso.dev/#gotchas - adding CSS margins makes the virtualization process slower
  2. https://virtuoso.dev/#performance - Performance is impacted by dynamic heights, widths and a large viewport. In our case, our message items span across 80-90% of the screen + all our content is dynamic (markdown, images, files). There's no way for any virtualization engine to figure out the heights of these items without actually mounting them.

We need to revert Virtuoso and bring back our simple, yet humble, chat interface.

@nikkothari22
Copy link
Member Author

More findings:

  1. We definitely need to remove Virtuoso. This is the scrolling performance of a chat with a large number of messages with Virtuoso on a MBP Pro with M2 Pro:
With.Virtuoso.mov
  1. If we remove Virtuoso, we get back the performance (see below), but lose out on a few features and the initial mount takes a lot of time.
Without.Virtuoso.mov

Virtuoso is being used for more than just virtualization in the app:

  1. Scroll to a message (from reply click and from saved messages) is dependent on Virtuoso. This can be fixed with generic document scrolling functions as done on the mobile app.
  2. Virtuoso is also keeping the content scrolled down (when new messages are loaded). This can also be done with document scrolling.
  3. The 2nd video has nice scroll performance, but when getting back to the page, the initial mount is painstakingly slow without Virtuoso. This is because of multiple reasons: poor component architecture, too many re-renders/computations and the most obvious - rendering too many messages.

Removing Virtuoso would need us to implement the following:

  1. Refactor message action palette on web app #496 - Refactor message action palette
  2. Add pagination for messages #472 - Add cursor based infinite pagination for messages
  3. Change the way "scroll to message" works - both when clicking on a reply message and also on a saved message. This would also mean we need to do Refactor Reply message box on web app #495 first.
  4. Swap out the emoji picker for a lightweight version. This is already being done with Try using TipTap on Raven web app #454.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant