Inconsistent rendering when multiple components share same src and request fails (cache + LOADED empty state)

[VanMaiTrai]

🐛 Inconsistent rendering when multiple components share same src and request fails (cache + LOADED empty state)

Hi maintainers 👋,

I’ve encountered an inconsistent rendering issue when using multiple <InlineSVG /> components with the same src, especially when the request fails (e.g. 404).

---

📌 Problem summary

When rendering two components with the same src:

• The first component correctly falls back to children (status = FAILED)

• The second component renders nothing (status = LOADED, but element = null)

---

🔁 Reproduction scenario

<InlineSVG src="/not-found.svg">
  <img src="/fallback.png" />
</InlineSVG>
<InlineSVG src="/not-found.svg">

<img src="/fallback.png" />

</InlineSVG>

Assume /not-found.svg returns:

• 404 Not Found

• content-type: text/html

---

🔍 Observed behavior

First component:

• fetch() throws → cache sets:

  { content: '', status: FAILED }
  
  

• Hook sets status = FAILED

• → correctly renders fallback (children) ✅

---

Second component:

• cacheStore.get() returns content = ""

• BUT does not propagate FAILED state

• Hook sets:

  {
  
  content: "",
  
  element: null,
  
  status: LOADED
  
  }
  
  

• Since:

  • element === null

  • status !== FAILED

→ component falls through to:

return loader;

→ ❌ renders nothing (no fallback, no error)

---

⚠️ Root cause analysis

1. CacheStore loses FAILED state

public async get(url: string) {

await this.fetchAndCache(url);

return this.cacheStore.get(url)?.content ?? '';

}

• Only returns content

• Does not expose status

• So FAILED → becomes indistinguishable from LOADED with empty content

---

2. Hook assumes LOADED = valid content

if (status === LOADED && content) {

getElement();

}

• If content === "", it skips conversion

• Leaves:

  status = LOADED
  
  element = null
  
  

---

3. InlineSVG does not handle LOADED + null element

if (element) return ...

if (status === FAILED) return children

return loader

• Missing case:

  status === LOADED && !element
  
  

---

💥 Result

Inconsistent UI:

Component	Result
First	fallback rendered ✅
Second	empty (nothing rendered) ❌

---

✅ Suggested fixes

Option 1 — Propagate FAILED from cache

public async get(url: string) {
  await this.fetchAndCache(url);
const item = this.cacheStore.get(url);
if (item?.status === STATUS.FAILED) {

throw new Error('Cached request failed');

}
return item?.content ?? '';

}

---

Option 2 — Validate content before marking LOADED

if (!content || !content.includes('<svg')) {

throw new Error('Invalid SVG content');

}

---

Option 3 — Defensive fallback in InlineSVG

if (

[STATUS.UNSUPPORTED, STATUS.FAILED].includes(status) ||

(status === STATUS.LOADED && !element)

) {

return children;

}

---

💡 Additional note

This issue becomes more visible when:

• Multiple components share the same src

• cacheRequests = true (default)

• The request fails or returns invalid content

---

🙏 Expected behavior

All components with the same failing src should behave consistently:

👉 Either:

• All render fallback
  or

• All render error state

But not a mix of fallback + empty render

---

Let me know your thoughts — happy to help test or open a PR 👍