element-hq / element-web

A glossy Matrix collaboration client for the web.
https://element.io
GNU Affero General Public License v3.0
11.28k stars 2.03k forks source link

Blurhash pulsates showing the thunbnail ~3 times before actually revealing the thumbnail on slow connection #18547

Open ara4n opened 3 years ago

ara4n commented 3 years ago

On a bad data connection, on today's nightly, I switched to a room with a large screenshot in it. The blurhash faded away sufficiently for me to read the text in the screenshot... and then faded back in again. This repeated about 3 times over a second or so until it finally disappeared to show the thumbnail. One possibility is that the thunbnail was progressively loading on the slow connection, causing the weird striptease effect.

For progressive loading, perhaps we can start the image at 0% opacity and animate that up to 100% as soon as we start to get loading (rather than loaded) callbacks. If the image loads quickly then it will be a smooth transition from blurhash to thumbnail. If the image loads slowly however we'll get a smooth transition to the progressively loading image, which will then cause a hard vertical wipe effect as it loads over the top of the blurhash... but at least that'll be better than the current behaviour.

ShadowJonathan commented 3 years ago

Personally, id rather see a blurhash fade into a fully loaded image instead of a still-downloading one, the last one would feel incredibly janky. If it'd load into a still-loading image, then that kinda defeats the purpose of blurhashes in the first place, imo, no matter how "slight" the transition from loading to loaded after the blurhash is removed