ImageWithLoader, can it transition height smoothly?

[Ligerx]

If you are on page 5 and scroll up to page 4, your position will likely jump as the page is loaded and ImageWIthLoader changes size. If the element height could have even a quick transition, it would be easier to figure out where you were looking.

[Ligerx]

I played around with it a little bit but couldn't figure it out. There might be a couple reasons

1. the image element is forcefully re-rendered
2. while the image is loading/error, it is not rendered and a div is put in its place
3. something about height: auto not working with transitions possibly

That said, this is a nice to have and not high priority. It really only applies to scrolling up to previously unloaded pages in WebtoonReader, which is not the main use case.

[Ligerx]

I had an idea, but I don't actually think it works...

1. The placeholder box + loader lay on top of the image (z-index)
2. I can actually add the loading progress at this point as well
3. on image load, transition the placeholder height to the image height, then maybe remove it from the DOM
4. at the same time, transition the image from 0 to image height.

I'm not actually sure if step 4 is supported behavior, I'd need to double check.
Also step 3 is doable, but might be annoying to implement.

[Ligerx]

2 image lazy load react components. I don't think they exactly meet my needs though
https://github.com/twobin/react-lazyload
https://github.com/Aljullu/react-lazy-load-image-component

For image loading progress, it's not built into <img> so you have to handle it yourself with xhr requests
https://stackoverflow.com/questions/14218607/javascript-loading-progress-of-an-image?answertab=votes#tab-top

If you need the image dimensions in javascript after load
https://stackoverflow.com/questions/5633264/javascript-get-image-dimensions