Partial renderings to avoid performance problems

[mondeja]

Kind of issue

• Feature
• Bug
• Design
• Other, namely:

Description

The problem seems to be one of the next (or all or some of them):

• In some devices or browsers, loading=lazy attribute for lazy loading of images don't work? This problem seems solved by Add intersection observer for lazy loading of images #291 altough IE11 is not supported as well (the same problem of loading=lazy)
• Even with lazy loading of images working, a lot of DOM nodes could potentially freeze the loading of the page.

Maybe an intersection observer or a virtual DOM from a library could solve this problem.

[mondeja]

TODO

• Investigate if content-visibility could help here.
• Maybe a deferred renderization of entire icon grid items using the intersection observer implemented in Add intersection observer for lazy loading of images #291 could also help as contain-intrinsic-size is set.

[mondeja]

I suspect that contain-intrinsic-size is not properly set for the compact layout 🛠️ (done in #293)

[kidonng]

• In some devices or browsers, loading=lazy attribute for lazy loading of images don't work?

There are two issues with loading="lazy". It has worse support than IntersectionObserver (I'm looking at you, Safari), and it is more eager than one may expect (browser typically loads content more than two viewports away).

• This problem seems solved by Add intersection observer for lazy loading of images #291 altough IE11 is not supported as well (the same problem of loading=lazy)

I feel the site is snappier than when I noticed this issue previously, but it is a very subjective measurement.

I don't know how many IE users the website has, but optimizing for it is certainly not worth it.

[mondeja]

After the intersection observer API implementation I've noted that the scroll behaves a bit erratically. This is due to the fact that contain-intrinsic-size is not properly setted because all icon grid items don't have the same height. Not sure how to properly solve this problem nor if it is something that we should care about as most users I suppose that are using the search bar to look for an icon.

A solution maybe could be to force all icon cards to be of the same height merging the metadata rows into one like in the next image, but we'll also need to add ... after icon titles that don't fit in one line, which is probably not an option because the user will need to open the details modal to see the brand name.

Other solution could be to create a smooth scroll bar, but not sure if is even possible at all.