Returns the loader on the initial render every time (even when the source is already cached)
martinprihoda opened this issue · comments
Describe the bug
prop "element" in the state of ReactInlineSVG (index.tsx:44) is null during the first render and will be set later in useEffects. Would it be possible to fix it so that the first render already returns the image from the cache? It doesn't look good when user moving between pages or simply whenever an already loaded svg is required to be mounted again.
Your minimal, reproducible example
n/a
Steps to reproduce
- Add CacheProvider context to your react app.
- Create component with some svg like <SVG src="path" loader={} cacheRequests={true} />.
- On every mount of the component, SVG returns during the first render even when svg is already cached (second argument of onLoad event - isCached - is true).
Expected behavior
I would expect the svg image to be returned directly during the first render (becouse of cache)
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
No response
react-inlinesvg version
4.1.0
TypeScript version
5.3.2
Build tool
webpack
Additional context
No response
Hey @martinprihoda
Both caching and parsing need the DOM to be available, so they happen after the first render (mount).
From the README:
The SVG is processed and parsed so the ref won't be set on the initial render. You can use the onLoad callback to get and use the ref instead.