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