Added lazy loading to merge books

[Realmbird]

Closes #9201

Add lazy loading for covers in works merge tool

Technical

Just adds loading lazy to images for books in merge

Testing

1. docker compose up
2. docker compose run --rm home npm run build-assets
3. docker compose exec -e PYTHONPATH=. web bash -c "./scripts/copydocs.py /works/OL21868175W /works/OL41495W"
4. http://localhost:8080/works/merge?records=OL21868175W,OL41495W
5. Inspect
6. Look at number of requests
7. Observe how number of requests stops around 180

Screenshot

Stakeholders

@cdrini @RayBB

[RayBB]

Tested and working.
Though, in my experience is is loading 135 covers vs 167.
So I think maybe there is something with the way Vue renders this that causes many covers to still load. But I think this small improvement should the default anyway.

@cdrini can you review/merge?

[cdrini]

Ah interesting ; try adding a min-height: 80px to the img tag's css. My guess would be at the beginning, since no height is specified, all the images have a height of effectively 1px. This means they are all on screen, causing the loading=lazy to have no effect. Also add a comment describing why the min-height was added to the CSS; that'll help future folks!

[Realmbird]

@cdrini @RayBB Added minimum height

[RayBB]

@Realmbird in your testing did adding that height effect anything?
As far as I can tell, it didn't.
@cdrini from my research, since we aren't rendering the Vue serverside, the lazy-loading doesn't work as expected since the html is created by vue after the page is loaded. That's why there are libraries like https://github.com/alexjoverm/v-lazy-image

So this PR has a mild effect but doesn't quite do what we want and it looks like that's not simple to do.
I propose
1: We merge it with lazy loading as is for the mild gain
2. Look into this again after we upgrade to Vue 3 and maybe considering doing some server side rendering to avoid this issue (I don't know if we can really do that but we could investigate then).

[cdrini]

Ah my bad, I just realized this was for the edition snippet! The edition snippet is working with loading="lazy" 👍 You can see it working as you scroll, and images load in. The fact that it's client-side shouldn't affect this ; I've used loading="lazy" with Vue many times and it works quite well.

It's the work covers that need to have loading="lazy" also added, and, potentially, need a min-height.

These:

So you can:

1. remove the min-height here
2. add loading="lazy" to the above images, and, if needed, add min-height to those images.

[RayBB]

@Realmbird do you think you could incorporate drini's feedback?

[RayBB]

@Realmbird still interested in working on this one?

[Realmbird]

No sorry forgot to unassign

[RayBB]

Closing this so someone else can work on it.
Thanks for your efforts