Race condition when loading files sometimes renders the wrong SVG
Sentri opened this issue · comments
Describe the bug
If the src
prop changes while the HTTP request for the previous SVG is still in progress, it sometimes leads to the wrong SVG being displayed.
To Reproduce
- Set
src
prop to point at an external (slow) SVG file - Quickly change the prop to point to a different (fast) SVG
- Race condition in the network requests sometimes displays the wrong SVG, depending on which HTTP request completest last
Expected behavior
The rendered SVG should always match the current src
prop.
Link to repl or repo
Repro repo: https://github.com/Sentri/react-inlinesvg-bug-repro
Live demo: https://codepen.io/sentri/project/full/XvWQJB (tested in Chromium)
Additional context
I believe this is the chain of events that reproduces this issue:
props.src
is set to 1.svg- 1.svg starts downloading
props.src
is set to 2.svg- 2.svg starts downloading
- 2.svg finishes downloading, handleLoad is called and 2.svg is displayed
- 1.svg finishes downloading, handleLoad is called and 1.svg is displayed
- User sees 1.svg even though the current
props.src
is set to 2.svg
Potential fix: 922a1c79
Run npx envinfo --system --binaries --npmPackages react-inlinesvg
System:
OS: Windows 10 10.0.19042
CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v4 @ 3.60GHz
Memory: 18.16 GB / 31.90 GB
Binaries:
Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
npmPackages:
react-inlinesvg: 2.2.2 => 2.2.2
I have the same problem !!