Fix #5795 - Claim images not lazy loaded

[lousando]

PR Checklist

Please check all that apply to this PR using "x":

• I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
• I have checked that this PR does not introduce a breaking change
• This PR introduces breaking changes and I have provided a detailed explanation below

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting)
• Refactoring (no functional changes)
• Documentation changes
• Other - Please describe:

Fixes

Issue Number: #5795

What is the current behavior?

All claim images and channel thumbnails are queued when a page is loaded; this slows down the app's overall responsiveness when many claim images are encountered on a page.

What is the new behavior?

Claim images and channel thumbnails are queued as they enter the user's viewport (when about 25% of the image container is shown). This frees up network resources and makes the app feel quicker.

Other information

Before the change, 37 image requests and a total of 60, were initiated on this page when only 4 claims are visible in the viewport.

After the change, only 11 image requests are made and a total of 28 requests when those same 4 claims are visible. This is ~53% reduction in total requests.

[tzarebczan]

Thanks for taking a stab at this and improving performance! We'll get a review on it soon.

Not sure if it directly addresses the issue with uneven claim tiles being loaded, but I think this code is in another repo this is private at this time.

Can we show you some appreciation?

[kauffj]

This looks like a smart change, thank you. Did you investigate whether loading="lazy" would produce a similar result with less JS?

[lousando]

@kauffj I did investigate that approach first, but it wasn't fruitful. The same amount of images were loaded when using loading="lazy".

[neb-b]

@lousando thanks for the PR! We are a little backed up at the moment so it might be a few days before I can review/test this.