Improve thumbnail loading feeling (smooth appear & pretty before-load design)

[LukasKalbertodt]

I noticed that we can improve the way Tobira loads thumbnails to make it more visually pleasing. While this sounds a bit unimportant, I think it might actually affect the general feel of Tobira for most users quite a bit. Compare Tobira with Plex for example:

plex-thumbnail-loading.mp4

tobira-thumbnail-load.mp4

This is not about speed at all, I artificially limited both to have a better look at it. I see three points:

• When not loaded yet, Plex just shows a nice grey box, whereas Tobira shows the alt text, which looks quite ugly. The alt text is important for accessibility, but just to have it in the HTML, showing it is not important.
• Tobira shows partial images, which I don't think is useful for thumbnails.
• In Tobira loaded thumbnails just appear immediately, while Plex "slowly" makes them fade in. I think the fade in is quite pleasant. Of course, it cannot be too slow, and should probably actually depend on the loading speed. If the images loaded immediately (e.g. because it's cached), we should also show it immediately.

[mtneug]

Maybe progressive JPEGs (or equivalent features in other codecs) can help? In the Tobira video you can see how images are rendered top to bottom. A progressive JPEG would be decoded in multiple passes with each pass improving the quality.

[LukasKalbertodt]

Maaaybe at some point, but that's harder as it involves Opencast. And Opencast needs to improve its Thumbnail story anyway (exhibit A, exhibit B). When that's tackled, one can think about your suggestion. But in the meantime, I think Tobira can just improve this already a lot.