search

jellyfin / jellyfin-web

Web Client for Jellyfin
https://jellyfin.org
GNU General Public License v2.0
2.31k stars 1.23k forks source link

Add a way to prevent "content jumping" on item details page #1233

Closed Delgan closed 4 years ago

Delgan commented 4 years ago

Hi all.

Describe the bug

While loading the details page, elements are not loaded and displayed at the same time, resulting in an unpleasant visual effect.

I know that some elements are lazily loaded and that placeholders are used, but I don't know if it's enough because some elements have variable dimensions.

I guess you are aware of the problem, but I recorded a small sequence for demonstration: https://streamable.com/7meta7

Actors are jumping because video/audio/subtitles are rendered lately. It's even more noticeable for the music albums because for a few milliseconds, the colored suggested albums are visible before being replaced by the track list.

For comparison, I recorded a similar sequence on Plex: https://streamable.com/uugpkh

As I'm not familiar with the codebase,I don't know if this is because the client needs to query the metadata from the server, or if it's because the content is dynamically generated in JS.

What do you think would be a good solution to avoid content jumping? Should we wait until everything is ready before displaying the content with a fade-in effect?

System (please complete the following information):

Attachments:

Artiume commented 4 years ago

Yeah, it's one of the many annoying issues with the browser at the moment. The migration to ES6 and then Vue should help with it.

One of the big style points is BlurHash being implemented https://github.com/jellyfin/jellyfin-web/pull/987

ferferga commented 4 years ago

@Artiume I think he rather means #1229

Confirm please @Delgan

Delgan commented 4 years ago

@ferferga I'm not sure it can be fixed solely by adjusting the scrollbar visibility.

Look at 0:23 of the first video I linked: the "More Like This" albums are displayed for like 100 ms before the tracklist finally appear. It causes an unfortunate "blinking effect" visually while loading the page.

ferferga commented 4 years ago

Oh, I see what you mean now

Neither what @Artiume or me suggests fixes the problem: @Artiume's linked PR just makes images that are not yet loaded blurred. So content will be still jump, as the problem is not that images aren't loaded, rather than the content appears in a first serve basis.

I'm of your opinion that we should hide the UI completely until everything is loaded, but I discussed this some time ago with the rest of the team and I think nobody liked the idea of giving longer load times for things that aren't fully loaded in pages.

I guess this will also be improved vastly once the database rewrite is done, as server will have less overhead without the processing of the JSON blobs.

heyhippari commented 4 years ago

@ferferga Hiding the UI for a potentially long time is bad usability-wise.

I've thought about loading content from top to bottom (Firing all the Promises at once, but only acting once they're all done and rendering the blocks "in order"). However, I haven't really messed with this yet (and it'd need to be done on each page)

ferferga commented 4 years ago

@MrTimscampi That seems the best solution possible.

Delgan commented 4 years ago

Thanks for having take a closer look!

Better performance are great, for sure. However, I'm afraid, that this does not fundamentally fix the problem in some cases (slow rendering on the client side).

Not sure it worth anything, but I've dissected the loading sequence video:

![Screenshot_2020-05-18 jellyfin - Streamable](https://user-images.githubusercontent.com/4193924/82244530-aba71800-9941-11ea-943d-e09cc0af6b09.png) ![Screenshot_2020-05-18 jellyfin - Streamable(1)](https://user-images.githubusercontent.com/4193924/82244538-ae097200-9941-11ea-9b2c-323c1dda3080.png) ![Screenshot_2020-05-18 jellyfin - Streamable(2)](https://user-images.githubusercontent.com/4193924/82244542-afd33580-9941-11ea-9713-ee641df70ca9.png) ![Screenshot_2020-05-18 jellyfin - Streamable(3)](https://user-images.githubusercontent.com/4193924/82244552-b2358f80-9941-11ea-9aed-2e77244fe1f4.png) ![Screenshot_2020-05-18 jellyfin - Streamable(4)](https://user-images.githubusercontent.com/4193924/82244564-b497e980-9941-11ea-9f3f-10737f920a71.png) ![Screenshot_2020-05-19 jellyfin - Streamable(1)](https://user-images.githubusercontent.com/4193924/82290837-18ed9400-99a8-11ea-8d04-2dd1c4d882ce.png)

Ideally, dimensions of any DOM element should not change once it has been rendered.

I realize that this is certainly very complicated for a whole bunch of reasons (unpredictable dimensions, delayed values fetched from server, responsive design for all clients, etc.).

Still, I think it's an important property to feel the detail page even more "polished".

It's probably not necessary to hide the entire page until everything is ready. Progressive and ordered loading as you suggested @MrTimscampi would be really great!

heyhippari commented 4 years ago

We already fixed the poster making the content move in #1206 (To be included in 10.6 :) )

It already helps a lot to make the load nicer.