Show loading screen for integration config (#5863)

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

@@ -14,10 +14,7 @@ import memoizeOne from "memoize-one";
 import * as Fuse from "fuse.js";
 import { caseInsensitiveCompare } from "../../../common/string/compare";
 import { computeRTL } from "../../../common/util/compute_rtl";
-import {
+import { nextRender } from "../../../common/util/render-status";
-  afterNextRender,
-  nextRender,
-} from "../../../common/util/render-status";
 import "../../../components/entity/ha-state-icon";
 import "../../../components/ha-card";
 import "@material/mwc-fab";
@@ -46,6 +43,7 @@ import { domainToName } from "../../../data/integration";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage";
+import "../../../layouts/hass-loading-screen";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
@@ -96,7 +94,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
 
   @property() public route!: Route;
 
-  @property() private _configEntries: ConfigEntryExtended[] = [];
+  @property() private _configEntries?: ConfigEntryExtended[];
 
   @property()
   private _configEntriesInProgress: DataEntryFlowProgressExtended[] = [];
@@ -217,32 +215,17 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     if (
       this._searchParms.has("config_entry") &&
       changed.has("_configEntries") &&
-      !(changed.get("_configEntries") as ConfigEntry[]).length &&
+      !changed.get("_configEntries") &&
-      this._configEntries.length
+      this._configEntries
     ) {
-      afterNextRender(() => {
+      this._highlightEntry();
-        const entryId = this._searchParms.get("config_entry")!;
-        const configEntry = this._configEntries.find(
-          (entry) => entry.entry_id === entryId
-        );
-        if (!configEntry) {
-          return;
-        }
-        const card: HaIntegrationCard = this.shadowRoot!.querySelector(
-          `[data-domain=${configEntry?.domain}]`
-        ) as HaIntegrationCard;
-        if (card) {
-          card.scrollIntoView({
-            block: "center",
-          });
-          card.classList.add("highlight");
-          card.selectedConfigEntryId = entryId;
-        }
-      });
     }
   }
 
   protected render(): TemplateResult {
+    if (!this._configEntries) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
     const [
       groupedConfigEntries,
       ignoredConfigEntries,
@@ -491,7 +474,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
   }
 
   private _handleRemoved(ev: HASSDomEvent<ConfigEntryRemovedEvent>) {
-    this._configEntries = this._configEntries.filter(
+    this._configEntries = this._configEntries!.filter(
       (entry) => entry.entry_id !== ev.detail.entryId
     );
   }
@@ -594,6 +577,27 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     ev.target.style.visibility = "hidden";
   }
 
+  private async _highlightEntry() {
+    await nextRender();
+    const entryId = this._searchParms.get("config_entry")!;
+    const configEntry = this._configEntries!.find(
+      (entry) => entry.entry_id === entryId
+    );
+    if (!configEntry) {
+      return;
+    }
+    const card: HaIntegrationCard = this.shadowRoot!.querySelector(
+      `[data-domain=${configEntry?.domain}]`
+    ) as HaIntegrationCard;
+    if (card) {
+      card.scrollIntoView({
+        block: "center",
+      });
+      card.classList.add("highlight");
+      card.selectedConfigEntryId = entryId;
+    }
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,