gilbarbara / react-inlinesvg

An SVG loader component for ReactJS
https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo
MIT License
1.27k stars 100 forks source link

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

Closed martinprihoda closed 10 months ago

martinprihoda commented 11 months ago

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

gilbarbara commented 11 months ago

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

gilbarbara commented 11 months ago

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.