Attempt to make icon fetching and caching more reliable

src/components/ha-icon.ts

@@ -156,6 +156,10 @@ export class HaIcon extends LitElement {
     );
     chunks[chunk] = iconPromise;
     this._setPath(iconPromise, iconName, requestedIcon);
+    // Remove chunk from cache on failure so next attempt retries
+    iconPromise.catch(() => {
+      delete chunks[chunk];
+    });
     debouncedWriteCache();
   }
 
@@ -177,11 +181,15 @@ export class HaIcon extends LitElement {
     iconName: string,
     requestedIcon: string
   ) {
-    const iconPack = await promise;
-    if (this.icon === requestedIcon) {
-      this._path = iconPack[iconName];
+    try {
+      const iconPack = await promise;
+      if (this.icon === requestedIcon) {
+        this._path = iconPack[iconName];
+      }
+      cachedIcons[iconName] = iconPack[iconName];
+    } catch (_err) {
+      // Chunk failed to load, already evicted from cache for retry
     }
-    cachedIcons[iconName] = iconPack[iconName];
   }
 
   static styles = css`

src/data/iconsets.ts

@@ -78,14 +78,16 @@ export const findIconChunk = (icon: string): string => {
 
 export const writeCache = async (chunks: Chunks) => {
   const keys = Object.keys(chunks);
-  const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
+  const results = await Promise.allSettled(Object.values(chunks));
   const iconStore = await getStore();
   // We do a batch opening the store just once, for (considerable) performance
   iconStore("readwrite", (store) => {
-    iconsSets.forEach((icons, idx) => {
-      Object.entries(icons).forEach(([name, path]) => {
-        store.put(path, name);
-      });
+    results.forEach((result, idx) => {
+      if (result.status === "fulfilled") {
+        Object.entries(result.value).forEach(([name, path]) => {
+          store.put(path, name);
+        });
+      }
       delete chunks[keys[idx]];
     });
   });