From da18882ab20e7e41001ac2616b8920d03a42e228 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Mon, 31 May 2021 13:57:13 +0300
Subject: [PATCH] #3 show nicer loading for iframe

---
 src/components/LNbitsWrapper.vue | 10 +++++++---
 src/components/Loading.vue       |  1 +
 src/components/PayInvoice.vue    |  2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/LNbitsWrapper.vue b/src/components/LNbitsWrapper.vue
index ff8fec1..4f512db 100644
--- a/src/components/LNbitsWrapper.vue
+++ b/src/components/LNbitsWrapper.vue
@@ -51,17 +51,21 @@ export default {
     const serverUrl = result.serverUrl
     // TODO: no user/wallet/serverUrl found
 
-    this.$q.notify({
-      type: 'info',
+    const closeLoading = this.$q.notify({
+      type: 'ongoing',
       message: 'Loading...',
       caption: serverUrl,
-      timeout: 1500,
+      position: 'center',
+      timeout: 5000,
       spinner: true,
     })
 
     const iFrame = document.getElementById('lnbits-site')
 
     iFrame.src = `${serverUrl}/wallet?usr=${userId}&wal=${walletId}`
+    iFrame.addEventListener('load', function () {
+      closeLoading()
+    })
   },
   methods: {
     gotoConnectPage() {
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index a3de2fc..2985f89 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -3,6 +3,7 @@
 </template>
 <script>
 export default {
+  name: 'loading',
   beforeDestroy() {
     this.$q.loading.hide()
   },
diff --git a/src/components/PayInvoice.vue b/src/components/PayInvoice.vue
index 142321b..e2633ed 100644
--- a/src/components/PayInvoice.vue
+++ b/src/components/PayInvoice.vue
@@ -120,7 +120,7 @@ import lnbitsApi from '../services/lnbits-api.svc'
 import uiUtils from '../utils/ui-utils'
 
 export default {
-  name: 'payInvoice',
+  name: 'pay-invoice',
   data() {
     return {
       // TODO: allow user to switch between wallets