From 49af034c2552f38eb44741cd7db90c1af60448c1 Mon Sep 17 00:00:00 2001
From: Filippo Tortomasi <filippo.tortomasi@gmail.com>
Date: Tue, 27 Apr 2021 12:18:57 +0200
Subject: [PATCH] Improve QR Code pairing instructions

---
 ionic/src/pages/home/pop-over-qrcode.html | 17 ++++++++---------
 ionic/src/pages/welcome/welcome.html      |  5 +++--
 ionic/src/providers/utils/utils.ts        |  4 +---
 ionic/src/theme/variables.scss            |  5 +++++
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/ionic/src/pages/home/pop-over-qrcode.html b/ionic/src/pages/home/pop-over-qrcode.html
index ed0dd819..e11c8569 100644
--- a/ionic/src/pages/home/pop-over-qrcode.html
+++ b/ionic/src/pages/home/pop-over-qrcode.html
@@ -11,20 +11,19 @@
 </ion-header>
 
 <ion-content padding text-center>
-    <p>
+    <p [hidden]="qrCodeUrl == ''">
         <qr-code class="qr-code-element" [value]="qrCodeUrl" [size]="240"></qr-code>
     </p>
 
+    <ion-spinner class="qr-spinner" color="primary" [hidden]="qrCodeUrl != ''"></ion-spinner>
+
     <div style="margin: 20px; font-size: 1.3em">
-        In order to pair the app:
+        Instructions:
         <ol text-left>
-            <li>Launch the app</li>
-            <li>Open the
-                <i>Select server</i> page</li>
-            <li>Tap on the scan icon
-                <ion-icon style="margin-left: 6px; font-size: .9em" name="qr-scanner"></ion-icon>
-            </li>
+            <li>Open the app on your smartphone</li>
+            <li>Open the <b>Select server</b> page by tapping the Wi-Fi shaped icon <ion-icon style="margin-left: 3px; font-size: .9em" name="ios-wifi"></ion-icon></li>
+            <li>Tap on the <b><ion-icon style="margin-left: 3px; font-size: .9em" name="qr-scanner"></ion-icon> QR Code Pairing</b> button</li>
             <li>Scan the QR code above</li>
         </ol>
     </div>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/ionic/src/pages/welcome/welcome.html b/ionic/src/pages/welcome/welcome.html
index d73de1e0..27693899 100644
--- a/ionic/src/pages/welcome/welcome.html
+++ b/ionic/src/pages/welcome/welcome.html
@@ -21,7 +21,8 @@ <h3>1) Install the app on your smartphone</h3>
       </div>
 
       <h3>2) Launch the app and scan this QR code to connect</h3>
-      <qr-code [value]="qrCodeUrl" [size]="240"></qr-code>
+      <qr-code [hidden]="qrCodeUrl == ''" [value]="qrCodeUrl" [size]="240"></qr-code>
+      <ion-spinner [hidden]="qrCodeUrl != ''" class="qr-spinner" color="primary"></ion-spinner>
 
       <div *ngIf="electronProvider.isDev()">
         <br>
@@ -36,4 +37,4 @@ <h3>2) Launch the app and scan this QR code to connect</h3>
     </div>
   </div>
 
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/ionic/src/providers/utils/utils.ts b/ionic/src/providers/utils/utils.ts
index 0a22e77b..12aa1841 100644
--- a/ionic/src/providers/utils/utils.ts
+++ b/ionic/src/providers/utils/utils.ts
@@ -44,9 +44,7 @@ export class UtilsProvider {
         if (defaultLocalAddress) { // Adds the defaultLocalAddress at very beginning of the list
           localAddresses.unshift(defaultLocalAddress);
         }
-        // this.ngZone.run(() => {
         resolve(Config.URL_PAIR + '/?h=' + encodeURIComponent(hostname) + '&a=' + encodeURIComponent(localAddresses.join('-')));
-        // })
       });
     })
   }
@@ -131,7 +129,7 @@ export class UtilsProvider {
   }
 
   public upgradeDisplayValue(requireRestart = false) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       // mark the update as "started"
       this.store.set('upgraded_displayValue', false);
 
diff --git a/ionic/src/theme/variables.scss b/ionic/src/theme/variables.scss
index 7c69785c..68676754 100644
--- a/ionic/src/theme/variables.scss
+++ b/ionic/src/theme/variables.scss
@@ -170,3 +170,8 @@ blockquote {
   left: 0;
 }
 
+.qr-spinner {
+  width: 100px;
+  height: 100px;
+  margin: 50px auto;
+}