How to reduce or remove flickering of the icons?

[RIP21]

Currently icons, no matter if cached or not, appear 5-10ms after the page is already rendered it's clearly visible in this gif.

What I do to present that is simply refreshing the page. It's an SSG page, so I assume my setup is improper here and it should be already in the HTML, but I also have SPA without any SSR/SSG and it's pretty annoying this jump. Maybe it makes sense to use, dunno, some useLayoutEffect or even suspense, or whatever internal React APIs to suspense for a few ms rendering of the entire page while icons are still to be loaded? At least on initial loading or so as it's pretty ugly.
Surely I can add loaders for each and everyone, yes, it will make it not as noticeable, but too manual nonetheless and still icons will appear a 5-10ms after.

Also wondering if adding all the icons into one big svg and then referencing them via IDs is a good idea, but I assume it will make it impossible to style them with CSS in that case.

Anyway, any ideas will be appreciated a lot!
I'm using Vite for SPA app, so if you have concrete recs of Vite will be even better :)

[RIP21]

Ah, I see this doesn't support SSR/SSG. A bit weird IMO :) I think there is an opportunity to fetch everything and render HTML inline already on the first render :)

Okay, so it seems that adding all the icons of SVG into one file and then use use with href is really a way to go :) As it allows for styling etc. and makes this library effectively irrelevant I can add this svg file into the link or so and preload it quickly.

[gilbarbara]

Hey @RIP21
This library uses the DOMParser to parse the SVGs (change title, description, preprocessing, etc.) so it needs the DOM.

You could use an SVG wrapper for the icons and set the width/height so it won't resize when loaded.

[cgcab]

I am currently having the same kind of issue with svg on a cdn, they get downloaded perfectly but after that when my component re-render even if the svg is loaded from the cache the flickering happens exactly like in @RIP21 example. I started to optimize my rendering and memoize lots of rendering but even with this some times the view has to be render again and I have this flickering effect that is super ugly.
I was thinking of implementing the CacheProvider would that help solve this problem ? If not, what's your advice or way to fix this ?

[RIP21]

@cgcab Cache provider doesn't help.

Only approach I think of taking at this point is to use svg loader that will create a single sprite file and give you (from import statement) an id from this svg sprite so you can reference it via use element.
This way, you'll have this sprite loading quickly and in one request and it will be cached properly and most importantly, it will be in the resulted production html head tag, so svg will be loaded faster than the JS file, or with the same chunk, so svg will be there and will be rendered using default HTML browser rules and not some runtime like this that takes 15-20ms to render even cached one or so.

[cgcab]

@gilbarbara I am still having problems with this flickering and even if I did like you said (setting a fake size to avoid the resizing that moves the elements, the image still disapear and appear for a few ms and it's still pretty ugle (event if it's a bit better now using this technique). There is still no way to be able to avoid this rerender to happen as it doesn't download the svg again (from cdn) and it is using the cache by default that seems strange to me that it still does this flickering even in this case. thanks a lot

[cgcab]

@gilbarbara After some testing of my code, I just found out that the latest version of the package 4.1.0 introduced svg flickering at every render.

Going back to version 4.0.3 and then 4.0.6 both were working without any flickering (image disappearing and reappearing after some ms). Don't know if my code is optimised only for the 4.0.x or if it's a bug with the latest version.

If you need more informations or a video I can make one ;)

[gilbarbara]

Hey @cgcab
I'll need a codesandbox with a minimal reproducible example.
Your app is rendered client-side or SSR? React version, too.

[gilbarbara]

@cgcab

I just set up a codesandbox that updates the component state, and there's no flickering.

I migrated the source code to be a functional component instead of a class in 4.1.0, but it has several tests that didn't fail afterward, including state updates and re-renders.

[cgcab]

Indeed your example seems to work fine so either my way of making my component breaks it or maybe my react version not being the same. I will investigate and tell you if I find more details ;) thanks for your time