Add loading text for long-running integration install step (#4378)

* Added optional label for dialog-data-entry-flow

* Use correct loading element

* Update src/translations/en.json

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Minor template adjustment

* Revert accidental change of PR templates

* Revert accidental change of PR templates

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -130,7 +130,11 @@ class DataEntryFlowDialog extends LitElement {
       >
         ${this._loading || (this._step === null && this._handlers === undefined)
           ? html`
-              <step-flow-loading></step-flow-loading>
+              <step-flow-loading
+                .label=${this.hass.localize(
+                  "ui.panel.config.integrations.config_flow.loading_first_time"
+                )}
+              ></step-flow-loading>
             `
           : this._step === undefined
           ? // When we are going to next step, we render 1 round of empty

src/dialogs/config-flow/step-flow-loading.ts

@@ -5,14 +5,22 @@ import {
   css,
   customElement,
   CSSResult,
+  property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner-lite";
 
 @customElement("step-flow-loading")
 class StepFlowLoading extends LitElement {
+  @property() public label?: string;
+
   protected render(): TemplateResult {
     return html`
       <div class="init-spinner">
+        ${this.label
+          ? html`
+              <div>${this.label}</div>
+            `
+          : ""}
         <paper-spinner-lite active></paper-spinner-lite>
       </div>
     `;

src/translations/en.json

@@ -1638,7 +1638,8 @@
             "external_step": {
               "description": "This step requires you to visit an external website to be completed.",
               "open_site": "Open website"
-            }
+            },
+            "loading_first_time": "Please wait while the integration is being installed"
           }
         },
         "users": {