From 543cc5f6568627671cc5d0c00ef1652cd4bdee7c Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 17 Jan 2026 20:45:51 +0800
Subject: [PATCH] disable buttons in navigation bar during initial page load

---
 src/views/mobile/accounts/EditPage.vue             |  4 ++--
 src/views/mobile/accounts/ListPage.vue             |  4 ++--
 .../mobile/accounts/MoveAllTransactionsPage.vue    |  4 ++--
 .../accounts/ReconciliationStatementPage.vue       |  6 +++---
 src/views/mobile/categories/AllPage.vue            |  2 +-
 src/views/mobile/categories/EditPage.vue           |  4 ++--
 src/views/mobile/categories/ListPage.vue           |  4 ++--
 src/views/mobile/exchangerates/ListPage.vue        |  4 ++--
 .../mobile/settings/AccountFilterSettingsPage.vue  |  5 +++--
 .../settings/ApplicationCloudSyncSettingsPage.vue  |  4 ++--
 .../mobile/settings/CategoryFilterSettingsPage.vue |  5 +++--
 .../settings/TransactionTagFilterSettingsPage.vue  |  5 +++--
 src/views/mobile/statistics/TransactionPage.vue    | 10 +++++-----
 src/views/mobile/tags/GroupListPage.vue            |  4 ++--
 src/views/mobile/tags/ListPage.vue                 |  6 +++---
 src/views/mobile/templates/ListPage.vue            |  4 ++--
 src/views/mobile/transactions/EditPage.vue         |  6 +++---
 src/views/mobile/transactions/ListPage.vue         | 14 +++++++-------
 src/views/mobile/users/DataManagementPage.vue      |  2 +-
 src/views/mobile/users/SessionListPage.vue         |  4 ++--
 src/views/mobile/users/TwoFactorAuthPage.vue       |  2 +-
 src/views/mobile/users/UserProfilePage.vue         |  4 ++--
 22 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/src/views/mobile/accounts/EditPage.vue b/src/views/mobile/accounts/EditPage.vue
index 5d3d157e..e2823c09 100644
--- a/src/views/mobile/accounts/EditPage.vue
+++ b/src/views/mobile/accounts/EditPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': account.type !== AccountType.MultiSubAccounts.type }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save"></f7-link>
             </f7-nav-right>
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index cdc31e80..32e62804 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
             <f7-nav-left v-else-if="sortable">
                 <f7-link icon-f7="xmark" :class="{ 'disabled': displayOrderSaving }" @click="cancelSort"></f7-link>
             </f7-nav-left>
             <f7-nav-title :title="tt('Account List')"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !allAccountCount || sortable }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="plus" href="/account/add" v-if="!sortable"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': displayOrderSaving || !displayOrderModified }" @click="saveSortResult" v-else-if="sortable"></f7-link>
diff --git a/src/views/mobile/accounts/MoveAllTransactionsPage.vue b/src/views/mobile/accounts/MoveAllTransactionsPage.vue
index 145eefcb..a108ff8b 100644
--- a/src/views/mobile/accounts/MoveAllTransactionsPage.vue
+++ b/src/views/mobile/accounts/MoveAllTransactionsPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Move All Transactions')"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link icon-f7="checkmark_alt"
                          :class="{ 'disabled': !fromAccount || !toAccountId || fromAccount?.id === toAccountId || !toAccountName || !isToAccountNameValid || moving }"
                          @click="confirm"></f7-link>
diff --git a/src/views/mobile/accounts/ReconciliationStatementPage.vue b/src/views/mobile/accounts/ReconciliationStatementPage.vue
index e3f188a1..65ede71a 100644
--- a/src/views/mobile/accounts/ReconciliationStatementPage.vue
+++ b/src/views/mobile/accounts/ReconciliationStatementPage.vue
@@ -1,16 +1,16 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }"  :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title>
                 <span style="color: var(--f7-text-color)" v-if="!finishQuery">{{ tt('Reconciliation Statement') }}</span>
-                <f7-link popover-open=".display-mode-popover-menu" v-if="finishQuery">
+                <f7-link popover-open=".display-mode-popover-menu" :class="{ 'disabled': loading }" v-if="finishQuery">
                     <span style="color: var(--f7-text-color)">{{ tt('Reconciliation Statement') }}</span>
                     <f7-icon class="page-title-bar-icon" style="opacity: 0.5"
                              color="gray" f7="chevron_down_circle_fill"></f7-icon>
                 </f7-link>
             </f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !validQuery }" @click="reload(false)" v-if="!finishQuery"></f7-link>
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': loading }" v-if="finishQuery" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
diff --git a/src/views/mobile/categories/AllPage.vue b/src/views/mobile/categories/AllPage.vue
index c34ef05b..d1a57299 100644
--- a/src/views/mobile/categories/AllPage.vue
+++ b/src/views/mobile/categories/AllPage.vue
@@ -1,6 +1,6 @@
 <template>
     <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
-        <f7-navbar :title="tt('Transaction Categories')" :back-link="tt('Back')"></f7-navbar>
+        <f7-navbar :class="{ 'disabled': loading }" :back-link="tt('Back')" :title="tt('Transaction Categories')"></f7-navbar>
 
         <f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
             <f7-list-item title="Expense" link="#"></f7-list-item>
diff --git a/src/views/mobile/categories/EditPage.vue b/src/views/mobile/categories/EditPage.vue
index cd0d1dd9..ad28ea55 100644
--- a/src/views/mobile/categories/EditPage.vue
+++ b/src/views/mobile/categories/EditPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/categories/ListPage.vue b/src/views/mobile/categories/ListPage.vue
index 99e6cbe2..e84dadda 100644
--- a/src/views/mobile/categories/ListPage.vue
+++ b/src/views/mobile/categories/ListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
             <f7-nav-left v-else-if="sortable">
                 <f7-link icon-f7="xmark" :class="{ 'disabled': displayOrderSaving }" @click="cancelSort"></f7-link>
             </f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length || sortable }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="plus" :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId + (currentPrimaryCategory ? `&color=${currentPrimaryCategory.color}&icon=${currentPrimaryCategory.icon}` : '')" v-if="!sortable"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': displayOrderSaving || !displayOrderModified }" @click="saveSortResult" v-else-if="sortable"></f7-link>
diff --git a/src/views/mobile/exchangerates/ListPage.vue b/src/views/mobile/exchangerates/ListPage.vue
index bb0320a1..d52d6183 100644
--- a/src/views/mobile/exchangerates/ListPage.vue
+++ b/src/views/mobile/exchangerates/ListPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page ptr @ptr:refresh="reload">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Exchange Rates Data')"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/settings/AccountFilterSettingsPage.vue b/src/views/mobile/settings/AccountFilterSettingsPage.vue
index 302aafdd..1eaf77c4 100644
--- a/src/views/mobile/settings/AccountFilterSettingsPage.vue
+++ b/src/views/mobile/settings/AccountFilterSettingsPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page with-subnavbar @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="save"></f7-link>
             </f7-nav-right>
@@ -11,6 +11,7 @@
             <f7-subnavbar :inner="false">
                 <f7-searchbar
                     custom-searchs
+                    :class="{ 'disabled': loading }"
                     :value="filterContent"
                     :placeholder="tt('Find account')"
                     :disable-button-text="tt('Cancel')"
diff --git a/src/views/mobile/settings/ApplicationCloudSyncSettingsPage.vue b/src/views/mobile/settings/ApplicationCloudSyncSettingsPage.vue
index 73e32df5..127a6f09 100644
--- a/src/views/mobile/settings/ApplicationCloudSyncSettingsPage.vue
+++ b/src/views/mobile/settings/ApplicationCloudSyncSettingsPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Settings Sync')"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': loading || enabling || disabling }" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/settings/CategoryFilterSettingsPage.vue b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
index 99843ead..1eb3cd68 100644
--- a/src/views/mobile/settings/CategoryFilterSettingsPage.vue
+++ b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page with-subnavbar @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="save"></f7-link>
             </f7-nav-right>
@@ -11,6 +11,7 @@
             <f7-subnavbar :inner="false">
                 <f7-searchbar
                     custom-searchs
+                    :class="{ 'disabled': loading }"
                     :value="filterContent"
                     :placeholder="tt('Find category')"
                     :disable-button-text="tt('Cancel')"
diff --git a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
index 8ba70a48..04318f93 100644
--- a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+++ b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page with-subnavbar @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableTag }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyAvailableTag }" @click="save"></f7-link>
             </f7-nav-right>
@@ -11,6 +11,7 @@
             <f7-subnavbar :inner="false">
                 <f7-searchbar
                     custom-searchs
+                    :class="{ 'disabled': loading }"
                     :value="filterContent"
                     :placeholder="tt('Find tag')"
                     :disable-button-text="tt('Cancel')"
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index cc143576..ddf439d6 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -1,14 +1,14 @@
 <template>
     <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title>
-                <f7-link popover-open=".chart-data-type-popover-menu">
+                <f7-link popover-open=".chart-data-type-popover-menu" :class="{ 'disabled': loading }">
                     <span class="statistics-page-title">{{ queryChartDataTypeName }}</span>
                     <f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
                 </f7-link>
             </f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
         </f7-navbar>
@@ -62,7 +62,7 @@
             <f7-card-header class="no-border display-block">
                 <div :class="{ 'statistics-chart-header': true, 'full-line': true, 'text-align-right': textDirection === TextDirection.LTR, 'text-align-left': textDirection === TextDirection.RTL}">
                     <span style="margin-inline-end: 4px;">{{ tt('Sort by') }}</span>
-                    <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ querySortingTypeName }}</f7-link>
+                    <f7-link href="#" popover-open=".sorting-type-popover-menu" :class="{ 'disabled': loading }">{{ querySortingTypeName }}</f7-link>
                 </div>
             </f7-card-header>
             <f7-card-content class="pie-chart-container" style="margin-top: -6px" :padding="false">
@@ -289,7 +289,7 @@
             </f7-list>
         </f7-popover>
 
-        <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
+        <f7-toolbar tabbar bottom :class="{ 'toolbar-item-auto-size': true, 'disabled': loading }">
             <f7-link :class="{ 'disabled': reloading || !canShiftDateRange }" @click="shiftDateRange(-1)">
                 <f7-icon class="icon-with-direction" f7="arrow_left_square"></f7-icon>
             </f7-link>
diff --git a/src/views/mobile/tags/GroupListPage.vue b/src/views/mobile/tags/GroupListPage.vue
index 72b9f465..d88481b6 100644
--- a/src/views/mobile/tags/GroupListPage.vue
+++ b/src/views/mobile/tags/GroupListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')" v-if="!displayOrderModified"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')" v-if="!displayOrderModified"></f7-nav-left>
             <f7-nav-left v-else-if="displayOrderModified">
                 <f7-link icon-f7="xmark" :class="{ 'disabled': displayOrderSaving }" @click="cancelSort"></f7-link>
             </f7-nav-left>
             <f7-nav-title :title="tt('Change Group Display Order')"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': displayOrderSaving || !displayOrderModified }" @click="saveSortResult"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/tags/ListPage.vue b/src/views/mobile/tags/ListPage.vue
index cd97f6d9..a2a6c418 100644
--- a/src/views/mobile/tags/ListPage.vue
+++ b/src/views/mobile/tags/ListPage.vue
@@ -1,17 +1,17 @@
 <template>
     <f7-page :ptr="!sortable && !hasEditingTag" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
             <f7-nav-left v-else-if="sortable">
                 <f7-link icon-f7="xmark" :class="{ 'disabled': displayOrderSaving }" @click="cancelSort"></f7-link>
             </f7-nav-left>
             <f7-nav-title>
-                <f7-link popover-open=".tag-group-popover-menu" :class="{ 'disabled': sortable || hasEditingTag }">
+                <f7-link popover-open=".tag-group-popover-menu" :class="{ 'disabled': loading || sortable || hasEditingTag }">
                     <span style="color: var(--f7-text-color)">{{ displayTagGroupName }}</span>
                     <f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
                 </f7-link>
             </f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': hasEditingTag || sortable }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="plus" :class="{ 'disabled': hasEditingTag }" v-if="!sortable" @click="add"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': displayOrderSaving || !displayOrderModified || hasEditingTag }" @click="saveSortResult" v-else-if="sortable"></f7-link>
diff --git a/src/views/mobile/templates/ListPage.vue b/src/views/mobile/templates/ListPage.vue
index 6fe18b6a..1b65f09c 100644
--- a/src/views/mobile/templates/ListPage.vue
+++ b/src/views/mobile/templates/ListPage.vue
@@ -1,12 +1,12 @@
 <template>
     <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')" v-if="!sortable"></f7-nav-left>
             <f7-nav-left v-else-if="sortable">
                 <f7-link icon-f7="xmark" :class="{ 'disabled': displayOrderSaving }" @click="cancelSort"></f7-link>
             </f7-nav-left>
             <f7-nav-title :title="templateType === TemplateType.Schedule.type ? tt('Scheduled Transactions') : tt('Transaction Templates')"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !templates.length || sortable }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="plus" :href="'/template/add?templateType=' + templateType" v-if="!sortable"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': displayOrderSaving || !displayOrderModified }" @click="saveSortResult" v-else-if="sortable"></f7-link>
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index 8a96f6d0..c3a20fb5 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -1,15 +1,15 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons" v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }" v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
                 <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
-        <f7-block class="no-margin-top margin-bottom">
+        <f7-block :class="{ 'no-margin-top margin-bottom': true, 'disabled': loading }">
             <f7-segmented strong round :class="{ 'readonly': pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add }">
                 <f7-button round :text="tt('Expense')" :active="transaction.type === TransactionType.Expense"
                            :disabled="pageTypeAndMode?.type === TransactionEditPageType.Transaction && mode !== TransactionEditPageMode.Add && transaction.type !== TransactionType.Expense"
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index c3c73015..7904a9d5 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -8,14 +8,14 @@
              @page:afterin="onPageAfterIn"
              @infinite="loadMore(true)">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title>
-                <f7-link popover-open=".chart-data-type-popover-menu">
+                <f7-link popover-open=".chart-data-type-popover-menu" :class="{ 'disabled': loading }">
                     <span style="color: var(--f7-text-color)">{{ displayPageTypeName }}</span>
                     <f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
                 </f7-link>
             </f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="search" @click="toggleSearchbar"></f7-link>
                 <f7-link icon-f7="plus" :class="{ 'disabled': !canAddTransaction }" @click="add"></f7-link>
             </f7-nav-right>
@@ -52,19 +52,19 @@
             <f7-link :class="{ 'disabled': loading || query.dateType === DateRange.All.type }" @click="shiftDateRange(query.minTime, query.maxTime, -1)">
                 <f7-icon class="icon-with-direction" f7="arrow_left_square"></f7-icon>
             </f7-link>
-            <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading }" popover-open=".date-popover-menu">
+            <f7-link popover-open=".date-popover-menu" :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading }">
                 <span :class="{ 'tabbar-item-changed': query.dateType !== DateRange.All.type }">{{ queryDateRangeName }}</span>
             </f7-link>
             <f7-link :class="{ 'disabled': loading || query.dateType === DateRange.All.type }" @click="shiftDateRange(query.minTime, query.maxTime, 1)">
                 <f7-icon class="icon-with-direction" f7="arrow_right_square"></f7-icon>
             </f7-link>
-            <f7-link class="tabbar-text-with-ellipsis" popover-open=".category-popover-menu" :class="{ 'disabled': query.type === 1 }">
+            <f7-link popover-open=".category-popover-menu" :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading || query.type === 1 }">
                 <span :class="{ 'tabbar-item-changed': query.categoryIds }">{{ queryCategoryName }}</span>
             </f7-link>
-            <f7-link class="tabbar-text-with-ellipsis" popover-open=".account-popover-menu">
+            <f7-link popover-open=".account-popover-menu" :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': loading }">
                 <span :class="{ 'tabbar-item-changed': query.accountIds }">{{ queryAccountName }}</span>
             </f7-link>
-            <f7-link popover-open=".more-popover-menu">
+            <f7-link popover-open=".more-popover-menu" :class="{ 'disabled': loading }">
                 <f7-icon f7="ellipsis_vertical" :class="{ 'tabbar-item-changed': query.type > 0 || query.amountFilter || query.tagFilter }"></f7-icon>
             </f7-link>
         </f7-toolbar>
diff --git a/src/views/mobile/users/DataManagementPage.vue b/src/views/mobile/users/DataManagementPage.vue
index 4fa6dd9e..c89cdd25 100644
--- a/src/views/mobile/users/DataManagementPage.vue
+++ b/src/views/mobile/users/DataManagementPage.vue
@@ -1,6 +1,6 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
-        <f7-navbar :title="tt('Data Management')" :back-link="tt('Back')"></f7-navbar>
+        <f7-navbar :class="{ 'disabled': loading }" :back-link="tt('Back')" :title="tt('Data Management')"></f7-navbar>
 
         <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
             <f7-list-item title="Transactions" after="Count"></f7-list-item>
diff --git a/src/views/mobile/users/SessionListPage.vue b/src/views/mobile/users/SessionListPage.vue
index d5a86c1a..b18b5aea 100644
--- a/src/views/mobile/users/SessionListPage.vue
+++ b/src/views/mobile/users/SessionListPage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Device & Sessions')"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right :class="{ 'disabled': loading }">
                 <f7-link :class="{ 'disabled': sessions.length < 2 }" :text="tt('Logout All')" @click="revokeAll"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/users/TwoFactorAuthPage.vue b/src/views/mobile/users/TwoFactorAuthPage.vue
index 9f45d335..ce2f0a72 100644
--- a/src/views/mobile/users/TwoFactorAuthPage.vue
+++ b/src/views/mobile/users/TwoFactorAuthPage.vue
@@ -1,6 +1,6 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
-        <f7-navbar :title="tt('Two-Factor Authentication')" :back-link="tt('Back')"></f7-navbar>
+        <f7-navbar :class="{ 'disabled': loading }" :title="tt('Two-Factor Authentication')" :back-link="tt('Back')"></f7-navbar>
 
         <f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
             <f7-list-item title="Status" after="Unknown"></f7-list-item>
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index 11ebf54c..fcc43e99 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -1,9 +1,9 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
+            <f7-nav-left :class="{ 'disabled': loading }" :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('User Profile')"></f7-nav-title>
-            <f7-nav-right class="navbar-compact-icons">
+            <f7-nav-right :class="{ 'navbar-compact-icons': true, 'disabled': loading }">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled() || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
                 <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" @click="save(currentNoPassword)"></f7-link>
             </f7-nav-right>