Wait for analytics data during onboarding

src/onboarding/onboarding-analytics.ts

@@ -6,9 +6,13 @@ import { fireEvent, type HASSDomEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-analytics";
 import "../components/ha-button";
+import "../components/ha-spinner";
 import "../components/ha-svg-icon";
 import type { Analytics } from "../data/analytics";
-import { setAnalyticsPreferences } from "../data/analytics";
+import {
+  getAnalyticsDetails,
+  setAnalyticsPreferences,
+} from "../data/analytics";
 import { onboardAnalyticsStep } from "../data/onboarding";
 import type { HomeAssistant } from "../types";
 import { documentationUrl } from "../util/documentation-url";
@@ -22,9 +26,11 @@ class OnboardingAnalytics extends LitElement {
 
   @state() private _error?: string;
 
-  @state() private _analyticsDetails: Analytics = {
-    preferences: {},
-  };
+  // Undefined while we are still waiting for the analytics integration to be
+  // set up (Home Assistant may still be starting up during onboarding).
+  @state() private _analyticsDetails?: Analytics;
+
+  private _retryTimeout?: number;
 
   protected render(): TemplateResult {
     return html`
@@ -40,13 +46,26 @@ class OnboardingAnalytics extends LitElement {
           <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
         </a>
       </p>
-      <ha-analytics
-        translation_key_panel="page-onboarding"
-        @analytics-preferences-changed=${this._preferencesChanged}
-        .localize=${this.localize}
-        .analytics=${this._analyticsDetails}
-      >
-      </ha-analytics>
+      ${
+        this._analyticsDetails
+          ? html`
+              <ha-analytics
+                translation_key_panel="page-onboarding"
+                @analytics-preferences-changed=${this._preferencesChanged}
+                .localize=${this.localize}
+                .analytics=${this._analyticsDetails}
+              >
+              </ha-analytics>
+            `
+          : html`
+              <div class="loading">
+                <ha-spinner></ha-spinner>
+                <p>
+                  ${this.localize("ui.panel.page-onboarding.analytics.waiting")}
+                </p>
+              </div>
+            `
+      }
       ${this._error ? html`<div class="error">${this._error}</div>` : ""}
       <div class="footer">
         <ha-button @click=${this._save} .disabled=${!this._analyticsDetails}>
@@ -63,6 +82,35 @@ class OnboardingAnalytics extends LitElement {
         this._save(ev);
       }
     });
+    this._loadAnalyticsDetails();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._retryTimeout) {
+      clearTimeout(this._retryTimeout);
+      this._retryTimeout = undefined;
+    }
+  }
+
+  private async _loadAnalyticsDetails(): Promise<void> {
+    try {
+      // The analytics integration registers its WebSocket commands during
+      // setup, but only stores its data once the config entry is set up. On a
+      // fresh install we can reach this step before that happened, so keep
+      // retrying until it is ready instead of failing on save.
+      this._analyticsDetails = await getAnalyticsDetails(this.hass);
+      this._error = undefined;
+    } catch (err: any) {
+      if (err.code === "not_found") {
+        this._retryTimeout = window.setTimeout(
+          () => this._loadAnalyticsDetails(),
+          1000
+        );
+        return;
+      }
+      this._error = err.message;
+    }
   }
 
   private _preferencesChanged(
@@ -76,6 +124,9 @@ class OnboardingAnalytics extends LitElement {
 
   private async _save(ev) {
     ev.preventDefault();
+    if (!this._analyticsDetails) {
+      return;
+    }
     try {
       await setAnalyticsPreferences(
         this.hass,
@@ -98,6 +149,13 @@ class OnboardingAnalytics extends LitElement {
         .error {
           color: var(--error-color);
         }
+        .loading {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          padding: 24px 0;
+        }
         a {
           color: var(--primary-color);
           text-decoration: none;

src/translations/en.json

@@ -11470,6 +11470,7 @@
         "analytics": {
           "header": "Help us help you",
           "finish": "Next",
+          "waiting": "Waiting for Home Assistant to finish starting up…",
           "preferences": {
             "base": {
               "title": "[%key:ui::panel::config::analytics::preferences::base::title%]",

test/e2e/app/src/onboarding.ts

@@ -68,6 +68,7 @@ const subscriptionResults: Record<string, unknown> = {
 };
 
 const commandResults: Record<string, unknown> = {
+  analytics: { preferences: {} },
   "analytics/preferences": {},
   "auth/current_user": currentUser,
   "brands/access_token": { token: "brands-token" },