Results Card Lag

[Landaman]

Because the result card is a client-side component, the icons cannot be globally cached.

The card is client-side because it needs useState to show expanded/contracted.

Perhaps something like Suspense would enable us to make the bulk of the component server-side, at least enabling icon caching.

[Landaman]

Result interception may provide a good way to solve this

[Landaman]

The only "good" way to handle this is to have our own SVGs

[Landaman]

Actually I take that back.

We can use a div and inject the raw SVG data using dangerousSetInnerHtml (and of course sanitizing with DomPurify)

The only problem is, this strips away some styling that is (at least mostly) necessary to get this to work.

[Landaman]

Update: It seems that even using a small, static PNG causes too large of wait times. This may be because we're using a "component" instead of a nested layout and route. Investigating...

[Landaman]

Fixed. The solution is to:

• Load the SVG image data asynchronously using e.g., SWR
• Replace the width and height tags in the returned image data using a Regex, so that the image fits
• Purify the image data using e.g., DOMPurify
• Inject the safe and correctly sized SVG data into a div using dangerouslySetInnerHtml