update the styling used when reloading browser cache data

src/views/base/settings/AppBrowserCacheSettingPageBase.ts

@@ -70,17 +70,26 @@ export function useAppBrowserCacheSettingPageBase() {
         }
     });
 
-    function loadCacheStatistics(): Promise<void> {
+    function loadCacheStatistics(updateLoadingState: boolean): Promise<void> {
         return new Promise((resolve, reject) => {
+            if (updateLoadingState) {
                 loading.value = true;
+            }
 
             loadBrowserCacheStatistics().then(statistics => {
                 fileCacheStatistics.value = statistics;
                 exchangeRatesCacheSize.value = exchangeRatesStore.getExchangeRatesCacheSize();
+
+                if (updateLoadingState) {
                     loading.value = false;
+                }
+
                 resolve();
             }).catch(error => {
+                if (updateLoadingState) {
                     loading.value = false;
+                }
+
                 reject(error);
             });
         });

src/views/desktop/app/settings/tabs/AppBrowserCacheSettingTab.vue

@@ -6,7 +6,7 @@
                     <div class="d-flex align-center">
                         <span>{{ tt('File Cache') }}</span>
                         <v-btn density="compact" color="default" variant="text" size="24"
-                               class="ms-2" :icon="true" :loading="loading" @click="loadCacheStatistics()">
+                               class="ms-2" :icon="true" :loading="loading" @click="loadCacheStatistics(true)">
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
@@ -88,9 +88,10 @@
                     </div>
                 </template>
 
-                <v-card-text>
+                <v-card-text class="d-flex align-end" style="height: 3rem">
                     <span class="text-body-1">{{ tt('Used storage') }}</span>
-                    <span class="text-xl ms-1">{{ formatVolumeToLocalizedNumerals(exchangeRatesCacheSize ?? 0, 2) }}</span>
+                    <v-skeleton-loader class="d-inline-block skeleton-no-margin ms-1 pt-1 pb-1" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
+                    <span class="text-xl ms-1" v-if="!loading">{{ formatVolumeToLocalizedNumerals(exchangeRatesCacheSize ?? 0, 2) }}</span>
                 </v-card-text>
 
                 <v-card-text class="mt-2">
@@ -188,7 +189,7 @@ const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 function clearMapCache(): void {
     confirmDialog.value?.open('Are you sure you want to clear map data cache?').then(() => {
         clearMapDataCache().then(() => {
-            loadCacheStatistics();
+            loadCacheStatistics(true);
         });
     });
 }
@@ -207,5 +208,5 @@ function clearExchangeRatesCache(): void {
     });
 }
 
-loadCacheStatistics();
+loadCacheStatistics(true);
 </script>

src/views/mobile/settings/BrowserCacheSettingPage.vue

@@ -150,21 +150,17 @@ const showExchangeRatesDataCacheExpirationPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 
 function reloadCacheStatistics(done?: () => void): void {
-    loadCacheStatistics().then(() => {
-        if (done) {
-            done();
-        }
+    loadCacheStatistics(false).then(() => {
+        done?.();
     }).catch(() => {
-        if (done) {
-            done();
-        }
+        done?.();
     });
 }
 
 function clearMapCache(): void {
     showConfirm('Are you sure you want to clear map data cache?', () => {
         clearMapDataCache().then(() => {
-            loadCacheStatistics();
+            loadCacheStatistics(true);
         });
     });
 }
@@ -183,5 +179,5 @@ function clearExchangeRatesCache(): void {
     });
 }
 
-loadCacheStatistics();
+loadCacheStatistics(true);
 </script>