Wait for media panel host readiness

src/components/media-player/ha-media-player-browse.ts

@@ -43,6 +43,7 @@ import {
 } from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { panelIsReady } from "../../layouts/panel-ready";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
@@ -159,6 +160,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   private _resizeObserver?: ResizeObserver;
 
+  private _initialReady = false;
+
   public connectedCallback(): void {
     super.connectedCallback();
     this.updateComplete.then(() => this._attachResizeObserver());
@@ -272,6 +275,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         ids: navigateIds,
         current: this._currentItem,
       });
+      this._signalInitialReady();
     } else {
       if (!currentProm) {
         currentProm = this._fetchData(
@@ -287,6 +291,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             ids: navigateIds,
             current: item,
           });
+          this._signalInitialReady();
         },
         (err) => {
           // When we change entity ID, we will first try to see if the new entity is
@@ -320,8 +325,10 @@ export class HaMediaPlayerBrowse extends LitElement {
               ),
               code: "entity_not_found",
             });
+            this._signalInitialReady();
           } else {
             this._setError(err);
+            this._signalInitialReady();
           }
         }
       );
@@ -1125,6 +1132,21 @@ export class HaMediaPlayerBrowse extends LitElement {
     fireEvent(this, "close-dialog");
   }
 
+  private _signalInitialReady(): void {
+    if (this._initialReady) {
+      return;
+    }
+    this._initialReady = true;
+    const root = this.getRootNode();
+    panelIsReady(
+      root instanceof ShadowRoot &&
+        root.host instanceof HTMLElement &&
+        root.host.tagName.startsWith("HA-PANEL-")
+        ? root.host
+        : this
+    );
+  }
+
   private _setError(error: any) {
     if (!this.dialog) {
       this._error = error;
@@ -1189,8 +1211,8 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _animateHeaderHeight() {
-    let start;
-    const animate = (time) => {
+    let start: number | undefined;
+    const animate = (time: number) => {
       if (start === undefined) {
         start = time;
       }

src/data/lovelace.ts

@@ -23,6 +23,7 @@ export interface LovelaceViewElement extends HTMLElement {
   badges?: HuiBadge[];
   sections?: HuiSection[];
   isStrategy: boolean;
+  initialRenderComplete?: Promise<void>;
   setConfig(config: LovelaceViewConfig): void;
 }
 

src/layouts/hass-loading-screen.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../components/animation/ha-fade-in";
 import "../components/ha-top-app-bar-fixed";
 import "../components/ha-spinner";
 import type { HomeAssistant } from "../types";
@@ -36,7 +37,9 @@ class HassLoadingScreen extends LitElement {
   private _renderContent(): TemplateResult {
     return html`
       <div class="content">
-        <ha-spinner></ha-spinner>
+        <ha-fade-in .delay=${500}>
+          <ha-spinner></ha-spinner>
+        </ha-fade-in>
         ${
           this.message
             ? html`<div id="loading-text">${this.message}</div>`

src/layouts/panel-ready.ts

@@ -1,3 +1,5 @@
+import { ContextProvider, createContext } from "@lit/context";
+import type { ReactiveController, ReactiveControllerHost } from "lit";
 import { ReactiveElement } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 
@@ -15,6 +17,43 @@ export const panelIsReady = async (element: HTMLElement) => {
   fireEvent(element, "hass-panel-ready");
 };
 
+export type RegisterChildPanelReady = (ready: Promise<void>) => void;
+
+export const childPanelReadyContext =
+  createContext<RegisterChildPanelReady>("child-panel-ready");
+
+export class ChildPanelReady implements ReactiveController {
+  private _promises: Promise<void>[] = [];
+
+  private _host: ReactiveControllerHost & HTMLElement;
+
+  private _resolveReady?: () => void;
+
+  public ready = new Promise<void>((resolve) => {
+    this._resolveReady = resolve;
+  });
+
+  public constructor(host: ReactiveControllerHost & HTMLElement) {
+    this._host = host;
+    host.addController(this);
+    new ContextProvider(host, {
+      context: childPanelReadyContext,
+      initialValue: (ready) => this._promises.push(ready),
+    });
+  }
+
+  public hostUpdated() {
+    Promise.all(this._promises).then(
+      () => {
+        this._resolveReady?.();
+        return panelIsReady(this._host);
+      },
+      () => undefined
+    );
+    this._host.removeController(this);
+  }
+}
+
 export class PanelReady {
   public ready?: Promise<void>;
 

src/layouts/partial-panel-resolver.ts

@@ -19,29 +19,66 @@ import { HassRouterPage } from "./hass-router-page";
 
 const CACHE_URL_PATHS = ["lovelace", "home", "config"];
 const PANEL_READY_TIMEOUT = 2000;
+const DASHBOARD_READY_TIMEOUT = 5000;
 const COMPONENTS = {
-  app: () => import("../panels/app/ha-panel-app"),
-  energy: () => import("../panels/energy/ha-panel-energy"),
-  calendar: () => import("../panels/calendar/ha-panel-calendar"),
-  config: () => import("../panels/config/ha-panel-config"),
-  custom: () => import("../panels/custom/ha-panel-custom"),
-  lovelace: () => import("../panels/lovelace/ha-panel-lovelace"),
-  history: () => import("../panels/history/ha-panel-history"),
-  iframe: () => import("../panels/iframe/ha-panel-iframe"),
-  logbook: () => import("../panels/logbook/ha-panel-logbook"),
-  map: () => import("../panels/map/ha-panel-map"),
-  my: () => import("../panels/my/ha-panel-my"),
-  profile: () => import("../panels/profile/ha-panel-profile"),
-  todo: () => import("../panels/todo/ha-panel-todo"),
-  "media-browser": () =>
-    import("../panels/media-browser/ha-panel-media-browser"),
-  light: () => import("../panels/light/ha-panel-light"),
-  security: () => import("../panels/security/ha-panel-security"),
-  climate: () => import("../panels/climate/ha-panel-climate"),
-  maintenance: () => import("../panels/maintenance/ha-panel-maintenance"),
-  home: () => import("../panels/home/ha-panel-home"),
-  notfound: () => import("../panels/notfound/ha-panel-notfound"),
-};
+  app: { load: () => import("../panels/app/ha-panel-app") },
+  energy: {
+    load: () => import("../panels/energy/ha-panel-energy"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  calendar: {
+    load: () => import("../panels/calendar/ha-panel-calendar"),
+    waitForReady: true,
+  },
+  config: { load: () => import("../panels/config/ha-panel-config") },
+  custom: { load: () => import("../panels/custom/ha-panel-custom") },
+  lovelace: {
+    load: () => import("../panels/lovelace/ha-panel-lovelace"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  history: { load: () => import("../panels/history/ha-panel-history") },
+  iframe: { load: () => import("../panels/iframe/ha-panel-iframe") },
+  logbook: { load: () => import("../panels/logbook/ha-panel-logbook") },
+  map: { load: () => import("../panels/map/ha-panel-map") },
+  my: { load: () => import("../panels/my/ha-panel-my") },
+  profile: { load: () => import("../panels/profile/ha-panel-profile") },
+  todo: { load: () => import("../panels/todo/ha-panel-todo") },
+  "media-browser": {
+    load: () => import("../panels/media-browser/ha-panel-media-browser"),
+    waitForReady: true,
+  },
+  light: {
+    load: () => import("../panels/light/ha-panel-light"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  security: {
+    load: () => import("../panels/security/ha-panel-security"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  climate: {
+    load: () => import("../panels/climate/ha-panel-climate"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  maintenance: {
+    load: () => import("../panels/maintenance/ha-panel-maintenance"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  home: {
+    load: () => import("../panels/home/ha-panel-home"),
+    waitForReady: true,
+    readyTimeout: DASHBOARD_READY_TIMEOUT,
+  },
+  notfound: { load: () => import("../panels/notfound/ha-panel-notfound") },
+} satisfies Record<
+  string,
+  Pick<RouteOptions, "load" | "waitForReady"> & { readyTimeout?: number }
+>;
 
 @customElement("partial-panel-resolver")
 class PartialPanelResolver extends HassRouterPage {
@@ -126,13 +163,12 @@ class PartialPanelResolver extends HassRouterPage {
   private _getRoutes(panels: Panels): RouterOptions {
     const routes: RouterOptions["routes"] = {};
     Object.values(panels).forEach((panel) => {
+      const component = COMPONENTS[panel.component_name];
       const data: RouteOptions = {
         tag: `ha-panel-${panel.component_name}`,
         cache: CACHE_URL_PATHS.includes(panel.url_path),
+        ...component,
       };
-      if (panel.component_name in COMPONENTS) {
-        data.load = COMPONENTS[panel.component_name];
-      }
       routes[panel.url_path] = data;
     });
 
@@ -221,9 +257,12 @@ class PartialPanelResolver extends HassRouterPage {
       )
     ) {
       await this.rebuild();
-      await promiseTimeout(PANEL_READY_TIMEOUT, this.pageRendered).catch(
-        () => undefined
-      );
+      const component =
+        COMPONENTS[this.hass.panels[this._currentPage].component_name];
+      await promiseTimeout(
+        component?.readyTimeout ?? PANEL_READY_TIMEOUT,
+        this.pageRendered
+      ).catch(() => undefined);
       // Only fire frontend/loaded when this call actually removed the launch
       // screen, so later panel updates do not fire it again. Native apps remove
       // it instantly because their own splash screen is still visible.

src/panels/calendar/ha-panel-calendar.ts

@@ -35,6 +35,7 @@ import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import { subscribeEntityRegistry } from "../../data/entity/entity_registry";
 import { fetchIntegrationManifest } from "../../data/integration";
 import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
+import { panelIsReady } from "../../layouts/panel-ready";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { haStyle } from "../../resources/styles";
 import type { CalendarViewChanged, HomeAssistant } from "../../types";
@@ -77,6 +78,8 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
 
   private _mql?: MediaQueryList;
 
+  private _initialReady = false;
+
   public connectedCallback() {
     super.connectedCallback();
     this._mql = window.matchMedia(
@@ -103,6 +106,10 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
         this._entityRegistry = entities;
         // Refresh calendars when entity registry updates (includes color changes)
         this._calendars = getCalendars(this.hass, this, this._entityRegistry);
+        if (!this._initialReady) {
+          this._initialReady = true;
+          panelIsReady(this);
+        }
         // Resubscribe events if view dates are available (handles both initial load and color updates)
         if (this._start && this._end) {
           this._unsubscribeAll().then(() => {

src/panels/climate/ha-panel-climate.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -31,6 +32,8 @@ class PanelClimate extends LitElement {
 
   @state() private _searchParams = new URLSearchParams(window.location.search);
 
+  private _childPanelReady?: ChildPanelReady;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -127,6 +130,7 @@ class PanelClimate extends LitElement {
       return;
     }
 
+    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -36,6 +36,7 @@ import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
+import { ChildPanelReady } from "../../../layouts/panel-ready";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -157,6 +158,11 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     total: 0,
   };
 
+  public constructor() {
+    super();
+    new ChildPanelReady(this);
+  }
+
   private _pages = memoizeOne(
     (
       cloudStatus,

src/panels/config/dashboard/ha-config-navigation.ts

@@ -1,4 +1,5 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { consume } from "@lit/context";
+import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { filterNavigationPages } from "../../../common/config/filter_navigation_pages";
@@ -7,6 +8,10 @@ import "../../../components/ha-icon-next";
 import type { CloudStatus } from "../../../data/cloud";
 import { getConfigEntries } from "../../../data/config_entries";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
+import {
+  childPanelReadyContext,
+  type RegisterChildPanelReady,
+} from "../../../layouts/panel-ready";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-config-navigation-list";
 
@@ -18,21 +23,20 @@ class HaConfigNavigation extends LitElement {
 
   @property({ attribute: false }) public pages!: PageNavigation[];
 
-  @state() private _hasBluetoothConfigEntries = false;
+  @state() private _visiblePages?: PageNavigation[];
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    getConfigEntries(this.hass, {
-      domain: "bluetooth",
-    }).then((bluetoothEntries) => {
-      this._hasBluetoothConfigEntries = bluetoothEntries.length > 0;
-    });
+  private _hasBluetoothConfigEntries = false;
+
+  @consume({ context: childPanelReadyContext })
+  private _registerChildPanelReady?: RegisterChildPanelReady;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._registerChildPanelReady?.(this._resolveVisiblePages());
   }
 
   protected render(): TemplateResult {
-    const pages = filterNavigationPages(this.hass, this.pages, {
-      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
-    }).map((page) => ({
+    const pages = (this._visiblePages ?? []).map((page) => ({
       ...page,
       name:
         page.name ||
@@ -75,6 +79,20 @@ class HaConfigNavigation extends LitElement {
     `;
   }
 
+  private async _resolveVisiblePages(): Promise<void> {
+    if (this.pages.some((page) => page.component === "bluetooth")) {
+      const entries = await getConfigEntries(this.hass, {
+        domain: "bluetooth",
+      });
+      this._hasBluetoothConfigEntries = entries.length > 0;
+    }
+
+    this._visiblePages = filterNavigationPages(this.hass, this.pages, {
+      hasBluetoothConfigEntries: this._hasBluetoothConfigEntries,
+    });
+    await this.updateComplete;
+  }
+
   static styles: CSSResultGroup = css`
     /* Accessibility */
     .visually-hidden {

src/panels/config/ha-panel-config.ts

@@ -89,6 +89,7 @@ class HaPanelConfig extends HassRouterPage {
       dashboard: {
         tag: "ha-config-dashboard",
         load: () => import("./dashboard/ha-config-dashboard"),
+        waitForReady: true,
       },
       entities: {
         tag: "ha-config-entities",

src/panels/light/ha-panel-light.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -31,6 +32,8 @@ class PanelLight extends LitElement {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  private _childPanelReady?: ChildPanelReady;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -127,6 +130,7 @@ class PanelLight extends LitElement {
       return;
     }
 
+    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/panels/lovelace/cards/hui-starting-card.ts

@@ -3,6 +3,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/animation/ha-fade-in";
 import "../../../components/ha-card";
 import "../../../components/ha-spinner";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -38,7 +39,9 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
 
     return html`
       <div class="content">
-        <ha-spinner></ha-spinner>
+        <ha-fade-in .delay=${500}>
+          <ha-spinner></ha-spinner>
+        </ha-fade-in>
         ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
       </div>
     `;

src/panels/lovelace/hui-root.ts

@@ -75,6 +75,7 @@ import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-di
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { haStyle } from "../../resources/styles";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { isMac } from "../../util/is_mac";
@@ -163,6 +164,8 @@ class HUIRoot extends LitElement {
 
   private _restoreScroll = false;
 
+  private _childPanelReady?: ChildPanelReady;
+
   private _undoRedoController = new UndoRedoController<UndoStackItem>(this, {
     apply: (config) => this._applyUndoRedo(config),
     currentConfig: () => ({
@@ -776,7 +779,7 @@ class HUIRoot extends LitElement {
       huiView.narrow = this.narrow;
     }
 
-    let newSelectView;
+    let newSelectView: HUIRoot["_curView"];
 
     let viewPath: string | undefined = this.route!.path.split("/")[1];
     viewPath = viewPath ? decodeURI(viewPath) : undefined;
@@ -1254,7 +1257,7 @@ class HUIRoot extends LitElement {
       return;
     }
 
-    let view;
+    let view: HUIView;
     const viewConfig = this.config.views[viewIndex];
 
     if (!viewConfig) {
@@ -1265,12 +1268,16 @@ class HUIRoot extends LitElement {
     if (this._viewCache[viewIndex]) {
       view = this._viewCache[viewIndex];
     } else {
+      if (!this._childPanelReady) {
+        this._childPanelReady = new ChildPanelReady(this);
+        this.requestUpdate();
+      }
       view = document.createElement("hui-view");
       view.index = viewIndex;
       this._viewCache[viewIndex] = view;
     }
 
-    view.lovelace = this.lovelace;
+    view.lovelace = this.lovelace!;
     view.hass = this.hass;
     view.narrow = this.narrow;
 

src/panels/lovelace/views/hui-masonry-view.ts

@@ -58,6 +58,12 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   private _mqlListenerRef?: () => void;
 
+  private _resolveInitialRender?: () => void;
+
+  public initialRenderComplete = new Promise<void>((resolve) => {
+    this._resolveInitialRender = resolve;
+  });
+
   public connectedCallback() {
     super.connectedCallback();
     this._initMqls();
@@ -166,7 +172,13 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       root.removeChild(root.lastChild);
     }
 
-    columns.forEach((column) => root.appendChild(column));
+    columns.forEach((column) => {
+      root.appendChild(column);
+    });
+    if (this.cards.length === 0 || columns.some((column) => column.lastChild)) {
+      this._resolveInitialRender?.();
+      this._resolveInitialRender = undefined;
+    }
   }
 
   private async _createColumns() {
@@ -234,6 +246,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         index,
         this.lovelace!.editMode
       );
+      if (columnElements.some((column) => column.isConnected)) {
+        this._resolveInitialRender?.();
+        this._resolveInitialRender = undefined;
+      }
     }
 
     // Remove empty columns

src/panels/lovelace/views/hui-view.ts

@@ -1,4 +1,5 @@
 import deepClone from "deep-clone-simple";
+import { consume } from "@lit/context";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -19,6 +20,10 @@ import type {
 } from "../../../data/lovelace/config/view";
 import { isStrategyView } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
+import {
+  childPanelReadyContext,
+  type RegisterChildPanelReady,
+} from "../../../layouts/panel-ready";
 import "../badges/hui-badge";
 import type { HuiBadge } from "../badges/hui-badge";
 import "../cards/hui-card";
@@ -95,6 +100,15 @@ export class HUIView extends ReactiveElement {
 
   private _config?: LovelaceViewConfig;
 
+  private _resolveInitialRender?: () => void;
+
+  private _initialRenderComplete = new Promise<void>((resolve) => {
+    this._resolveInitialRender = resolve;
+  });
+
+  @consume({ context: childPanelReadyContext })
+  private _registerChildPanelReady?: RegisterChildPanelReady;
+
   @storage({
     key: "dashboardCardClipboard",
     state: false,
@@ -152,6 +166,11 @@ export class HUIView extends ReactiveElement {
     return this;
   }
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._registerChildPanelReady?.(this._initialRenderComplete);
+  }
+
   public willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
@@ -324,6 +343,13 @@ export class HUIView extends ReactiveElement {
     const viewConfig = await this._generateConfig(rawConfig);
 
     this._setConfig(viewConfig, isStrategy);
+    await customElements.whenDefined(this._layoutElement!.localName);
+    if (this._layoutElement instanceof ReactiveElement) {
+      await this._layoutElement.updateComplete;
+    }
+    await this._layoutElement!.initialRenderComplete;
+    this._resolveInitialRender?.();
+    this._resolveInitialRender = undefined;
   }
 
   private _createLayoutElement(config: LovelaceViewConfig): void {

src/panels/maintenance/ha-panel-maintenance.ts

@@ -5,6 +5,7 @@ import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-top-app-bar-fixed";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -31,6 +32,8 @@ class PanelMaintenance extends LitElement {
 
   @state() private _searchParams = new URLSearchParams(window.location.search);
 
+  private _childPanelReady?: ChildPanelReady;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -127,6 +130,7 @@ class PanelMaintenance extends LitElement {
       return;
     }
 
+    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

src/panels/security/ha-panel-security.ts

@@ -5,6 +5,7 @@ import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-top-app-bar-fixed";
 import type { LovelaceStrategyViewConfig } from "../../data/lovelace/config/view";
+import { ChildPanelReady } from "../../layouts/panel-ready";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
@@ -31,6 +32,8 @@ class PanelSecurity extends LitElement {
 
   @state() private _searchParms = new URLSearchParams(window.location.search);
 
+  private _childPanelReady?: ChildPanelReady;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -127,6 +130,7 @@ class PanelSecurity extends LitElement {
       return;
     }
 
+    this._childPanelReady ??= new ChildPanelReady(this);
     this._lovelace = {
       config: config,
       rawConfig: rawConfig,

test/e2e/app.spec.ts

@@ -4,7 +4,7 @@
  * Run with:
  *   yarn test:e2e:app
  */
-import { test, expect } from "@playwright/test";
+import { test, expect, type Page } from "@playwright/test";
 import {
   appSidebar,
   appSidebarConfig,
@@ -161,11 +161,106 @@ test.describe("Quick search", () => {
 
 defineRouteSmokeTests(appRouteSmokeGroups);
 
+const assertInitialReadiness = async (
+  page: Page,
+  options: {
+    path: string;
+    loadingSelector: string;
+    resolver:
+      "rejectMediaBrowse" | "resolveCalendarRegistry" | "resolveMediaBrowse";
+    readySelector: string;
+  }
+) => {
+  await goToPanel(page, options.path);
+
+  const launchScreen = page.locator("#ha-launch-screen");
+  await expect(launchScreen).toBeAttached({ timeout: QUICK_TIMEOUT });
+  await expect(page.locator(options.loadingSelector)).toBeAttached({
+    timeout: QUICK_TIMEOUT,
+  });
+
+  await page.evaluate((resolver) => window[resolver]?.(), options.resolver);
+
+  await expect(page.locator(options.readySelector)).toBeAttached({
+    timeout: PANEL_TIMEOUT,
+  });
+  await expect(launchScreen).not.toBeAttached({ timeout: QUICK_TIMEOUT });
+};
+
+test.describe("Initial readiness", () => {
+  test("keeps the launch screen until calendar content renders", async ({
+    page,
+  }) => {
+    await assertInitialReadiness(page, {
+      path: "/?scenario=delayed-calendar#/calendar",
+      loadingSelector: "ha-panel-calendar ha-spinner",
+      resolver: "resolveCalendarRegistry",
+      readySelector: "ha-full-calendar",
+    });
+  });
+
+  test("keeps the launch screen until media content renders", async ({
+    page,
+  }) => {
+    await assertInitialReadiness(page, {
+      path: "/?scenario=delayed-media-browse#/media-browser/browser",
+      loadingSelector: "ha-media-player-browse > ha-spinner",
+      resolver: "resolveMediaBrowse",
+      readySelector: "ha-media-player-browse .no-items",
+    });
+  });
+
+  test("keeps the launch screen until a media error renders", async ({
+    page,
+  }) => {
+    await assertInitialReadiness(page, {
+      path: "/?scenario=delayed-media-browse-error#/media-browser/browser",
+      loadingSelector: "ha-media-player-browse > ha-spinner",
+      resolver: "rejectMediaBrowse",
+      readySelector: "ha-media-player-browse ha-alert",
+    });
+  });
+});
+
 // ---------------------------------------------------------------------------
 // Lovelace
 // ---------------------------------------------------------------------------
 
 test.describe("Lovelace dashboard", () => {
+  test("keeps the launch screen until generated content renders", async ({
+    page,
+  }) => {
+    await goToPanel(page, "/?scenario=delayed-generated-dashboard#/climate");
+
+    const launchScreen = page.locator("#ha-launch-screen");
+    await expect(launchScreen).toBeAttached({ timeout: QUICK_TIMEOUT });
+    await expect(page.locator("hui-view")).not.toBeAttached();
+
+    await page.evaluate(() => window.resolveGeneratedDashboard?.());
+
+    await expect(page.locator("hui-view")).toBeAttached({
+      timeout: PANEL_TIMEOUT,
+    });
+    await expect(launchScreen).not.toBeAttached({ timeout: QUICK_TIMEOUT });
+  });
+
+  test("keeps the launch screen until initial content renders", async ({
+    page,
+  }) => {
+    await goToPanel(page, "/?scenario=delayed-lovelace#/lovelace");
+
+    const launchScreen = page.locator("#ha-launch-screen");
+    await expect(launchScreen).toBeAttached({ timeout: QUICK_TIMEOUT });
+    await expect(page.locator("hui-card")).not.toBeAttached();
+
+    await page.evaluate(() => window.resolveLovelaceConfig?.());
+
+    await expect(page.locator("hui-card").first()).toBeAttached({
+      timeout: PANEL_TIMEOUT,
+    });
+    await expect(launchScreen).not.toBeAttached({ timeout: QUICK_TIMEOUT });
+  });
+
   test("renders cards", async ({ page }) => {
     await goToPanel(page, "/lovelace");
     // At least one card should appear

test/e2e/app/src/ha-test.ts

@@ -92,6 +92,11 @@ declare global {
   interface Window {
     __assistRun?: unknown;
     __mockHass: MockHomeAssistant;
+    rejectMediaBrowse?: () => void;
+    resolveCalendarRegistry?: () => void;
+    resolveGeneratedDashboard?: () => void;
+    resolveLovelaceConfig?: () => void;
+    resolveMediaBrowse?: () => void;
   }
 }
 

test/e2e/app/src/scenarios/index.ts

@@ -1,5 +1,10 @@
-import type { ExtEntityRegistryEntry } from "../../../../../src/data/entity/entity_registry";
 import type { AssistPipeline } from "../../../../../src/data/assist_pipeline";
+import type {
+  EntityRegistryEntry,
+  ExtEntityRegistryEntry,
+} from "../../../../../src/data/entity/entity_registry";
+import type { LovelaceRawConfig } from "../../../../../src/data/lovelace/config/types";
+import type { MediaPlayerItem } from "../../../../../src/data/media-player";
 import type { MockHomeAssistant } from "../../../../../src/fake_data/provide_hass";
 
 export type Scenario = (hass: MockHomeAssistant) => Promise<void> | void;
@@ -124,6 +129,98 @@ const quickSearchAssistScenario: Scenario = async (hass) => {
   });
 };
 
+const addLaunchScreen = () => {
+  const launchScreen = document.createElement("div");
+  launchScreen.id = "ha-launch-screen";
+  document.body.prepend(launchScreen);
+};
+
+const delayedLovelaceScenario: Scenario = (hass) => {
+  addLaunchScreen();
+
+  const config: LovelaceRawConfig = {
+    views: [
+      {
+        title: "Home",
+        cards: [{ type: "markdown", content: "Dashboard ready" }],
+      },
+    ],
+  };
+  let resolveConfig: ((config: LovelaceRawConfig) => void) | undefined;
+  const configPromise = new Promise<LovelaceRawConfig>((resolve) => {
+    resolveConfig = resolve;
+  });
+
+  window.resolveLovelaceConfig = () => resolveConfig?.(config);
+  hass.mockWS("lovelace/config", () => configPromise);
+};
+
+const delayedGeneratedDashboardScenario: Scenario = (hass) => {
+  addLaunchScreen();
+
+  const loadFragmentTranslation = hass.loadFragmentTranslation;
+  let resolveTranslation: (() => void) | undefined;
+  const translationReady = new Promise<void>((resolve) => {
+    resolveTranslation = resolve;
+  });
+
+  hass.loadFragmentTranslation = async (fragment) => {
+    if (fragment === "lovelace") {
+      await translationReady;
+    }
+    return loadFragmentTranslation(fragment);
+  };
+  window.resolveGeneratedDashboard = resolveTranslation;
+};
+
+const delayedCalendarScenario: Scenario = (hass) => {
+  addLaunchScreen();
+
+  let resolveRegistry: ((entries: EntityRegistryEntry[]) => void) | undefined;
+  const registryPromise = new Promise<EntityRegistryEntry[]>((resolve) => {
+    resolveRegistry = resolve;
+  });
+
+  window.resolveCalendarRegistry = () => resolveRegistry?.([]);
+  hass.mockWS("config/entity_registry/list", () => registryPromise);
+};
+
+const delayedMediaBrowseScenario: Scenario = (hass) => {
+  addLaunchScreen();
+
+  const root: MediaPlayerItem = {
+    title: "Media",
+    media_content_id: "media-source://media_source",
+    media_content_type: "app",
+    media_class: "directory",
+    can_play: false,
+    can_expand: true,
+    can_search: false,
+    children: [],
+  };
+  let resolveBrowse: ((item: MediaPlayerItem) => void) | undefined;
+  const browsePromise = new Promise<MediaPlayerItem>((resolve) => {
+    resolveBrowse = resolve;
+  });
+
+  window.resolveMediaBrowse = () => resolveBrowse?.(root);
+  hass.mockWS("media_source/browse_media", () => browsePromise);
+};
+
+const delayedMediaBrowseErrorScenario: Scenario = (hass) => {
+  addLaunchScreen();
+
+  let rejectBrowse:
+    ((reason: { code: string; message: string }) => void) | undefined;
+  const browsePromise = new Promise<MediaPlayerItem>((_resolve, reject) => {
+    rejectBrowse = reject;
+  });
+
+  window.rejectMediaBrowse = () =>
+    rejectBrowse?.({ code: "unknown_error", message: "Browse failed" });
+  hass.mockWS("media_source/browse_media", () => browsePromise);
+};
+
 // ── Registry ──────────────────────────────────────────────────────────────
 
 export const scenarios: Record<string, Scenario> = {
@@ -131,6 +228,11 @@ export const scenarios: Record<string, Scenario> = {
   "non-admin": nonAdminScenario,
   "dark-theme": darkThemeScenario,
   "custom-theme": customThemeScenario,
+  "delayed-calendar": delayedCalendarScenario,
+  "delayed-generated-dashboard": delayedGeneratedDashboardScenario,
+  "delayed-media-browse": delayedMediaBrowseScenario,
+  "delayed-media-browse-error": delayedMediaBrowseErrorScenario,
   "light-more-info": lightMoreInfoScenario,
   "quick-search-assist": quickSearchAssistScenario,
+  "delayed-lovelace": delayedLovelaceScenario,
 };