From a8d21c6112299d49e82b81b76ab7dcff77e4dbfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliv=C3=A9r=20Falvai?= <ofalvai@gmail.com>
Date: Wed, 18 Mar 2020 17:00:08 +0100
Subject: [PATCH] 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 | 6 +++++-
 src/dialogs/config-flow/step-flow-loading.ts      | 8 ++++++++
 src/translations/en.json                          | 3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index 2ff2a75f55..1f79a1bfc1 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/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
diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts
index 6df00345ca..ce6ffd2f13 100644
--- a/src/dialogs/config-flow/step-flow-loading.ts
+++ b/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>
     `;
diff --git a/src/translations/en.json b/src/translations/en.json
index c1c628a10d..5b770289d5 100755
--- a/src/translations/en.json
+++ b/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": {