From 470ec3354eae2142c94ebfcb71d2910848b77af5 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Sat, 9 Mar 2019 09:26:09 -0600
Subject: [PATCH] Rendering QR code only if there is data, plus loading
 indicator

---
 BTCPayServer/Views/Invoice/Checkout-Body.cshtml  | 15 +++++++++++----
 BTCPayServer/wwwroot/checkout/css/normalizer.css |  2 ++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index 1b2bfaf71..87003ee1f 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -192,7 +192,7 @@
         </form>
     </div>
     <div class="bp-view payment scan" id="scan">
-        <div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null }">
+        <div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null || !scanDisplayQr }">
             <div class="btnGroupLnd">
                 <button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }"
                         v-bind:title="$t('BOLT 11 Invoice')">
@@ -205,11 +205,18 @@
             </div>
         </div>
         <div class="payment__scan">
-            <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
-            <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }">
+            <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon"
+                 v-if="scanDisplayQr" />
+            <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }"
+                    v-if="scanDisplayQr">
             </qrcode>
+
+
+            <div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
+                <partial name="Checkout-Spinner" />
+            </div>
         </div>
-        <div class="payment__details__instruction__open-wallet">
+        <div class="payment__details__instruction__open-wallet" v-if="scanDisplayQr">
             <a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
                 <span>{{$t("Open in wallet")}}</span>
             </a>
diff --git a/BTCPayServer/wwwroot/checkout/css/normalizer.css b/BTCPayServer/wwwroot/checkout/css/normalizer.css
index adb85fe23..6fc39efc7 100644
--- a/BTCPayServer/wwwroot/checkout/css/normalizer.css
+++ b/BTCPayServer/wwwroot/checkout/css/normalizer.css
@@ -9444,6 +9444,8 @@ strong {
 .payment__scan {
     position: relative;
     text-align: center;
+    height: 256px;
+    margin-bottom: 5px;
 }
 
 .payment__scan__checkmark-wrapper {