Improve native loader UI (#5126)

<!-- Thank you for submitting a Pull Request and helping to improve Home
Assistant. Please complete the following sections to help the processing
and review of your changes. Please do not delete anything from this
template. -->

## Summary
<!-- Provide a brief summary of the changes you have made and most
importantly what they aim to achieve -->
- Include server it is loading
- Include icon representation of type of URL

## Screenshots
<!-- If this is a user-facing change not in the frontend, please include
screenshots in light and dark mode. -->

## Link to pull request in Documentation repository
<!-- Pull requests that add, change or remove functionality must have a
corresponding pull request in the Companion App Documentation repository
(https://github.com/home-assistant/companion.home-assistant). Please add
the number of this pull request after the "#" -->
Documentation: home-assistant/companion.home-assistant#

## Any other notes
<!-- If there is any other information of note, like if this Pull
Request is part of a bigger change, please include it here. -->

Author: bgoncal

Sources/App/Frontend/Extensions/WebViewGestureHandler.swift

@@ -142,14 +142,7 @@ final class WebViewGestureHandler {
         let nextServer = servers[nextIndex]
 
         Current.sceneManager.appCoordinator.done { coordinator in
-            coordinator.open(server: nextServer).done { frontend in
-                guard let window = frontend.presentationWindow else { return }
-                let hud = ProgressHUD.showAdded(to: window, animated: true)
-                hud.isUserInteractionEnabled = false
-                hud.mode = .text
-                hud.label.text = nextServer.info.name
-                hud.hide(animated: true, afterDelay: 1.0)
-            }
+            coordinator.open(server: nextServer)
         }
     }
 }

Sources/App/Frontend/WebView/HomeAssistantView/HomeAssistantView.swift

@@ -16,8 +16,7 @@ struct HomeAssistantView: View, WebFrontendView {
         )
     }
 
-    // The themed status-bar strip is rendered outside the web-view opacity group so reloads don't blink or
-    // resize it. It keeps the last frontend-provided colour until WebKit sends a new theme-colour update.
+    // The themed status-bar strip keeps the last frontend-provided colour until WebKit sends a new update.
     private var themedStatusBar: some View {
         GeometryReader { proxy in
             if let color = viewModel.overlayState.statusBarColor {
@@ -32,15 +31,15 @@ struct HomeAssistantView: View, WebFrontendView {
 
     var body: some View {
         ZStack {
-            themedStatusBar
-            // The web content group is separate from the standby overlay and status-bar strip so those layers can
-            // stay stable while the frontend reloads.
+            // The frontend content group is separate from the standby overlay so it can fade with pull-to-refresh and
+            // reloads.
             ZStack(alignment: .topLeading) {
+                themedStatusBar
                 homeAssistant
                 pullToRefreshIndicator
                 macTitleBar
             }
-            .opacity(viewModel.contentOpacity)
+            .opacity(viewModel.webViewContentOpacity)
             noActiveURLState
             standByView
         }

Sources/App/Frontend/WebView/HomeAssistantView/HomeAssistantViewModel.swift

@@ -72,6 +72,15 @@ final class HomeAssistantViewModel: ObservableObject {
         isFullScreenLoaderMounted || overlayState.emptyState != nil
     }
 
+    var webViewContentOpacity: Double {
+        if overlayState.emptyState != nil || isFullScreenLoaderVisible || isPullToRefreshActive {
+            return 0
+        }
+
+        guard pullToRefreshProgress > 0 else { return contentOpacity }
+        return contentOpacity * Double(1 - min(1, max(0, pullToRefreshProgress)))
+    }
+
     var showsPullToRefresh: Bool {
         pullToRefreshProgress > 0 || isPullToRefreshActive
     }