fix(hub-ui): show failed icons and retry on remount (#381)

Author: dvcolomban

packages/hub-ui/src/client/components/icons/IconifyIcon.vue

@@ -20,29 +20,40 @@ const iconifyParsed = computed(() => {
 })
 
 const iconifyLoaded = ref<string | undefined>(undefined)
-watchEffect(async () => {
-  if (!iconifyParsed.value) {
-    iconifyLoaded.value = undefined
+const failed = ref(false)
+watchEffect(async (onCleanup) => {
+  let active = true
+  onCleanup(() => {
+    active = false
+  })
+  iconifyLoaded.value = undefined
+  failed.value = false
+  if (!iconifyParsed.value)
     return
-  }
   try {
-    iconifyLoaded.value = await getIconifySvg(iconifyParsed.value.collection, iconifyParsed.value.icon)
+    const svg = await getIconifySvg(iconifyParsed.value.collection, iconifyParsed.value.icon)
+    if (active)
+      iconifyLoaded.value = svg
   }
   catch {
-    // A failed icon fetch (offline / flaky CDN) should degrade to a blank icon,
-    // not throw out of the async effect and crash the surrounding panel.
-    iconifyLoaded.value = undefined
+    /** Keep fetch failures local to the icon so the surrounding panel remains usable. */
+    if (active)
+      failed.value = true
   }
 })
 </script>
 
 <template>
+  <div v-if="failed" class="i-ph:warning-duotone w-full h-full" aria-hidden="true" />
   <div
-    v-if="iconifyParsed"
+    v-else-if="iconifyParsed"
+    aria-hidden="true"
     v-html="iconifyLoaded"
   />
   <img
     v-else :src="icon"
+    alt=""
+    aria-hidden="true"
     class="w-full h-full m-auto"
     draggable="false"
   >

packages/hub-ui/src/client/utils/iconify.ts

@@ -24,10 +24,10 @@ export async function getIconifySvg(collection: string, icon: string) {
 
   async function _get() {
     const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=100%`
-    // Bound the request so a stalled connection (offline / flaky CDN / firewall
-    // black-holing the host) rejects instead of hanging forever; the caller
-    // already degrades a rejected fetch to a blank icon.
-    const svg = await fetch(url, { signal: AbortSignal.timeout(10_000) }).then(res => res.text())
-    return purify.sanitize(svg)
+    /** Bound stalled requests so the caller can display its failure glyph. */
+    const response = await fetch(url, { signal: AbortSignal.timeout(10_000) })
+    if (!response.ok)
+      throw new Error(`Iconify request failed: ${response.status}`)
+    return purify.sanitize(await response.text())
   }
 }