From 5d38dc188b315d484b178c2229b487e18abab88d Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Nov 2025 23:00:20 +0100
Subject: [PATCH] Fix loading state hang when user has no permissions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed UI hanging indefinitely on "Loading..." when users have no
account permissions or when API calls fail.

Problem: When API calls failed (due to no permissions, timeout, or
other errors), the error handlers would show error notifications but
wouldn't clear the loading state. This left data properties as null
or undefined, causing v-if/v-else templates to show spinners forever.

Solution: Set default/empty values in error handlers to clear loading
states and allow UI to render properly:

- loadBalance(): Set balance to {balance: 0, fiat_balances: {}, accounts: []}
- loadTransactions(): Set transactions to [] and pagination.total to 0
- loadAccounts(): Set accounts to []

Now when API calls fail, users see:
- Error notification (existing behavior)
- Empty state UI instead of infinite spinner (new behavior)
- "No transactions yet" / "0 sats" instead of "Loading..."

Affected files:
- static/js/index.js (lines 326-331, 391-393, 434-435)

Co-Authored-By: Claude <noreply@anthropic.com>

Fix Chart of Accounts loading spinner stuck issue

Fixed the Chart of Accounts section showing "Loading accounts..."
indefinitely when user has no account permissions.

Problem: The previous commit set accounts = [] in error handler to
clear loading state. However, the template logic was:
- v-if="accounts.length > 0" → show accounts list
- v-else → show loading spinner

When accounts = [] (empty array), it triggered v-else and showed
the spinner forever.

Solution: Changed the v-else block from loading spinner to empty
state message "No accounts available" with grey text styling.

Now when loadAccounts() fails or returns empty:
- Shows "No accounts available" instead of infinite spinner
- Consistent with other empty states (transactions, balances)
- User sees informative message instead of fake loading state

Affected: templates/castle/index.html (line 792-794)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/js/index.js          | 11 +++++++++++
 templates/castle/index.html |  5 ++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 471a03d..d449a34 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -323,6 +323,12 @@ window.app = Vue.createApp({
         }
       } catch (error) {
         LNbits.utils.notifyApiError(error)
+        // Set default balance to clear loading state
+        this.balance = {
+          balance: 0,
+          fiat_balances: {},
+          accounts: []
+        }
       }
     },
     async loadAllUserBalances() {
@@ -382,6 +388,9 @@ window.app = Vue.createApp({
         this.transactionPagination.has_prev = response.data.has_prev
       } catch (error) {
         LNbits.utils.notifyApiError(error)
+        // Set empty array to clear loading state
+        this.transactions = []
+        this.transactionPagination.total = 0
       }
     },
     applyTransactionFilter() {
@@ -423,6 +432,8 @@ window.app = Vue.createApp({
         this.accounts = response.data
       } catch (error) {
         LNbits.utils.notifyApiError(error)
+        // Set empty array to clear loading state
+        this.accounts = []
       }
     },
     async loadCurrencies() {
diff --git a/templates/castle/index.html b/templates/castle/index.html
index 77c73cb..97f5ee5 100644
--- a/templates/castle/index.html
+++ b/templates/castle/index.html
@@ -789,9 +789,8 @@
             </q-item-section>
           </q-item>
         </q-list>
-        <div v-else>
-          <q-spinner color="primary" size="sm"></q-spinner>
-          Loading accounts...
+        <div v-else class="text-center text-grey q-pa-md">
+          No accounts available
         </div>
       </q-card-section>
     </q-card>