Fix lazy loading on the genre pages

[Jorgensonnj]

Changes

Changed the query object's SortBy value to be SortName from Random. This change keeps the ordering of the shows consistent when scrolling to and from a genre section of the genre tab.

Issues

Fixes #6779 Genre tab's sorting gets applied each time a row is scrolled into view

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	b3df9f8
Status	✅ Deployed!
Preview URL	https://dde51c7a.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

[viown]

Using Random here is intended in order to avoid showing the same items over and over again. The issue is that the requests will still be made when the rows are scrolled into view.

I'm assuming this issue is a side-effect from the lazy loader which loads the rows as the user scrolls down. If we want to fix this we should prevent loading rows that have already been loaded.

[Jorgensonnj]

Changes

• Undid my previous commit per the previous comment from @viown.
• Added logic around the callback function of the intersectionObserver that executes the callback and then prevents it from future execution.

Notes

This change will impact movie genres, show genres, and images.

[viown]

Awesome, it looks like the lazy loader never even worked as intended for the genres pages and your change fixes it. However, the image loader relies on the multiple execution of the callback in order to fill and empty the image as it intersects and goes out of view.

I believe after your change, it'll never get emptied, so I'm thinking we could add an option to the lazy loader e.g invokeOnce to implement your behaviour and use that on the movies and tv show genre pages.

[Jorgensonnj]

Third time is the charm!

Changes

• The creation of the intersectionObserver within the context of the lazyLoader will now pass along the observer to the callback function. This will allow control of the observer from within the callback function.
• Lazy loaded movie and show items now explicitly unobserve the item after they have been loaded.

Notes

Image lazy loading functionality seemed to be unaffected by these changes, but please let me know if I missed something.

[viown]

Calling unobserve after the items were fetched can leave a small window where fillItemsContainer could be called more than once. I think you can just call unobserve closer to the beginning of the function and that would be fine.

[Jorgensonnj]

I just made a change to move up the unobserve closer to the beginning of the function.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud