UX / Better show state ESPHome is in

[Fitzi]

Describe the enhancement

Some places and actions lack a display of the current state. Add messages for errors and indicators to show what’s happening at the moment. See use cases:

Use cases

1. WebSocket Connection Failure

If the WebSocket connection fails, there should be a prominent warning on the main screen.
In my case, the WebSocket was blocked, and it took me a while to realize that this was the issue.
A warning like "We couldn't establish a WebSocket connection! This is required for some operations." would have made the problem immediately clear.

2. Wireless Log Viewing / Uploading

When I open logs wirelessly (or when uploading a new setup wirelessly) the log window remains empty for a while at first.
In my case, it was empty long enough that I closed and refreshed the page a few times, thinking it was stuck.
A simple spinner and a "Connecting to the device..." message would significantly improve the user experience.

3. WebSerial FramingError During ESP Setup

While setting up my ESP initially, I repeatedly encountered a FramingError from WebSerial API. However, the UI only showed a "Connecting..." dialog that spun indefinitely.
Displaying an error message when something goes wrong would be helpful.

Visual examples

No response

Anything else?

I have set up ESPHome on TrueNAS using the app image. As a proxy, I'm using Nginx Proxy Manager. From what I've seen, this is quite a common setup, so it's likely that other people will also forget to enable WebSockets in the proxy.

I just started setting up ESPHome and ran into the issues mentioned above. All of them could have been resolved immediately if a few simple messages had been shown in the UI.