No internet - No icons in Integrations & Devices pages

[AlainPeccable]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

We had a large outage from the ISP provider for more than 10h. During that time the Integrations & Devices pages within the configuration page were not showing any icons.
Once internet returned all icons were back.

Note that all dashboards / entities & areas were displaying the icons. Everything was also working as expected while being offline.

Describe the behavior you expected

Icons visible even when internet is lost.

Steps to reproduce the issue

1. ISP off
2. Check integrations & Devices page

...

What version of Home Assistant Core has the issue?

2023.8.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Google Chrome 115.0.5790.171

Which operating system are you using to run this browser?

Microsoft Windows [version 10.0.22000.2295

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

During ISP Outage:

After ISP Outage:

[steverep]

What you are describing happens because the device/integration logos are externally hosted and pulled from https://brands.home-assistant.io/. Other Material Design icons are stored locally and cached with the rest of the app on your browser. See related issue #15440 for more explanation.

However, it looks like we don't currently have any logic to properly cache those brand images, which should be fixed. 👍🏻

[steverep]

I've been working on caching the brand images in #17840, but currently running into some technical snags. Hopefully it'll be worked out soon.

Also, please note that the frontend is only able to address this via the service worker, which won't apply to legacy browsers or non-https access. For that, it must be handled at the origin server, so I opened home-assistant/brands#4718.

[cyberhuman]

What is the reason the icons and logos are hosted on an external website instead of storing them locally?
I'm writing a (private) custom integration and I'm quite surprised that my device shows a broken image icon without the ability to customize it.

[steverep]

What is the reason the icons and logos are hosted on an external website instead of storing them locally?

My understanding is that the main issue for the decision was size, but that question, while related, is off-topic and would be best discussed on the community forum or Discord chat.

I'm writing a (private) custom integration and I'm quite surprised that my device shows a broken image icon without the ability to customize it.

You mean it shows a placeholder image, or an actual error? The latter would be a new issue in the frontend while the former is by design.

I know custom integrations are free to submit images to the brands website as well, but honestly I don't know if there's a way to add them locally only for private use. That would be a feature request for core though, not the frontend.

[cyberhuman]

It shows an actual error loading the image:

I noticed it's because the URL is https://brands.home-assistant.io/whatever/dark_icon.png but it should be https://brands.home-assistant.io/_/whatever/dark_icon.png for the placeholder image to work.

[cyberhuman]

It's a bit better with the placeholder image, but not that much of a difference.

[steverep]

Yeah that's a bug. It should be either no image or the placeholder. Can you please open another issue for that?

[steverep]

Just a quick status update... waiting on home-assistant/brands#4722 before the frontend change can be merged.