Returns the loader on the initial render every time (even when the source is already cached)

[Martin Příhoda]

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

1. Add CacheProvider context to your react app.
2. Create component with some svg like <SVG src="path" loader={} cacheRequests={true} />.
3. 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

[Gil Barbara]

Hey @martinprihoda
Both caching and parsing need the DOM to be available, so they happen after the first render (mount).

[Gil Barbara]

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.