search

OdyseeTeam / odysee-frontend

The code that runs odysee.com
https://odysee.com
MIT License
213 stars 68 forks source link

Adding Item to Watch Later List Causes Frontend to Freeze #3157

Open Loweville opened 2 weeks ago

Loweville commented 2 weeks ago

Bug When adding item to Watch Later list, the entire frontend freezes as it processes the action

To Reproduce Steps to reproduce the behavior:

  1. Go to any video preview element
  2. Click on 'Watch Later'
  3. Observe time to process task

Expected behavior The site is still fully responsive and allows you to interact with anything like normal

Screenshots N/A, not screen-shotable

System Configuration

Website (Odysee.com)

Additional context I see that the Watch Later function utilizes react-redux's connect function, and the doPlaylistAddAndAllowPlaying function issues a dispatch request, I was wondering if there could be an opportunity to utilise Javascript Promises to allow it to run asynchronously, therefore it wouldn't freeze the frontend as the action was being performed.

tzarebczan commented 5 days ago

@keikari can you reproduce and take a look to see if there's any quick improvements possible?

tzarebczan commented 5 days ago

@Loweville Thank you for this report! Are you a dev and would potentially want to take a shot at it also?

keikari commented 5 days ago

I can see some freezing, from slight hiccup to seconds of freeze, depending of how many preview tiles have been loaded.

I'm not 100% sure, but I think the doPlaylistAddAndAllowPlaying is already ran asynchronously and not the real culprit here.

And I think the actual issue is with redux store being updated multiple times while that is running, and when there are lot of preview tiles checking for new values from the store, it gets really heavy.

Freezes get noticeably worse when scrolling down in some category. (Page 1 = ~60ms/render, Page 5 = 180ms/render)

Adding an item to Watch later 3 times on the page 1: 2024-10-17_08-29

Adding an item to Watch later 3 times on the page 5: 2024-10-17_09-38

If I'm correct about the cause:
ChatGPT says that react-window could be used so that only the items that are actually showing on the page get rendered. That sounds like something that can help to prevent worst cases of this.
Will see if I can figure out the usage of that, and if it makes anything happen.

keikari commented 5 days ago

On initial testing using react-window does help with the performance, but not sure how to make it work properly.