From cc08ad46e3d91ade08647db1260d9595eb1714ad Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 31 Jul 2023 00:20:35 +0800
Subject: [PATCH] modify overview page loading style

---
 src/views/desktop/HomePage.vue                | 36 ++++++++++-------
 .../overview/IncomeExpenseOverviewCard.vue    | 15 +++++--
 .../overview/MonthlyIncomeAndExpenseCard.vue  | 40 ++++++++++++++++---
 3 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 25a2871c..dcef0e68 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -21,15 +21,17 @@
 
                 <v-card-text>
                     <h5 class="text-2xl font-weight-medium text-primary">
-                        {{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}
-                        <v-btn density="compact" color="default" variant="text"
+                        <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span>
+                        <v-skeleton-loader class="d-inline-block overview-card-skeleton mt-4" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
+                        <v-btn class="ml-1" density="compact" color="default" variant="text"
                                :icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
                             <v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
                         </v-btn>
                     </h5>
                     <div class="mt-2 mb-3">
                         <span class="mr-2">{{ $t('Monthly income') }}</span>
-                        <span>{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
+                        <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
+                        <v-skeleton-loader class="d-inline-block overview-card-skeleton" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
                     </div>
                     <v-btn size="small" to="/transactions?dateType=7">{{ $t('View Details') }}</v-btn>
                     <v-img class="overview-card-background" src="img/desktop/card-background.png"/>
@@ -40,10 +42,10 @@
 
         <v-col cols="12" lg="2" md="6">
             <income-expense-overview-card
-                :disabled="loadingOverview" :icon="icons.calendarToday"
+                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
                 :title="$t('Today')"
-                :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : '-'"
-                :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : '-'"
+                :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
+                :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
                 :datetime="displayDateRange.today.displayTime"
             >
                 <template #menus>
@@ -56,10 +58,10 @@
 
         <v-col cols="12" lg="2" md="6">
             <income-expense-overview-card
-                :disabled="loadingOverview" :icon="icons.calendarWeek"
+                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
                 :title="$t('This Week')"
-                :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : '-'"
-                :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : '-'"
+                :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
+                :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
                 :datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
             >
                 <template #menus>
@@ -72,10 +74,10 @@
 
         <v-col cols="12" lg="2" md="6">
             <income-expense-overview-card
-                :disabled="loadingOverview" :icon="icons.calendarMonth"
+                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
                 :title="$t('This Month')"
-                :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-'"
-                :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-'"
+                :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
+                :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
                 :datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
             >
                 <template #menus>
@@ -88,10 +90,10 @@
 
         <v-col cols="12" lg="2" md="6">
             <income-expense-overview-card
-                :disabled="loadingOverview" :icon="icons.calendarYear"
+                :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
                 :title="$t('This Year')"
-                :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : '-'"
-                :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : '-'"
+                :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : ''"
+                :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : ''"
                 :datetime="displayDateRange.thisYear.displayTime"
             >
                 <template #menus>
@@ -308,4 +310,8 @@ export default {
     inset-block-end: 0.5rem;
     inset-inline-end: 1rem;
 }
+
+.overview-card-skeleton .v-skeleton-loader__text {
+    margin: 0;
+}
 </style>
diff --git a/src/views/desktop/overview/IncomeExpenseOverviewCard.vue b/src/views/desktop/overview/IncomeExpenseOverviewCard.vue
index 31bd4691..e49c7b3b 100644
--- a/src/views/desktop/overview/IncomeExpenseOverviewCard.vue
+++ b/src/views/desktop/overview/IncomeExpenseOverviewCard.vue
@@ -16,10 +16,10 @@
             </v-btn>
         </v-card-text>
         <v-card-text class="pb-2">
-            <div class="d-flex align-center mb-2">
-                <span class="font-weight-semibold text-truncate text-red text-h5 text-income me-2">{{ incomeAmount }}</span>
-            </div>
-            <span class="text-truncate text-h6 text-expense">{{ expenseAmount }}</span>
+            <div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
+            <v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
+            <div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
+            <v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
         </v-card-text>
         <v-card-text>
             <span class="text-caption">{{ datetime }}</span>
@@ -34,6 +34,7 @@ import {
 
 export default {
     props: [
+        'loading',
         'disabled',
         'icon',
         'title',
@@ -50,3 +51,9 @@ export default {
     }
 }
 </script>
+
+<style>
+.income-expense-overview-card-skeleton .v-skeleton-loader__text {
+    margin: 0;
+}
+</style>
diff --git a/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue b/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
index 66c7641b..021d2998 100644
--- a/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
+++ b/src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
@@ -4,13 +4,36 @@
             <span class="text-2xl font-weight-bold">{{ $t('Trend in Income and Expense') }}</span>
         </template>
 
-        <v-card-text class="overview-monthly-chart overview-monthly-chart-no-data-tips" v-if="!loading && !hasAnyData">
+        <v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-if="loading && !hasAnyData">
+            <div class="overview-monthly-chart-skeleton-container h-100" style="margin-top: -30px">
+                <div class="d-flex w-100 h-100 align-center justify-center">
+                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                </div>
+                <div class="d-flex w-100 h-100 align-center justify-center">
+                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                </div>
+                <div class="d-flex w-100 h-100 align-center justify-center">
+                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                </div>
+                <div class="d-flex w-100 h-100 align-center justify-center">
+                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                </div>
+                <div class="d-flex w-100 h-100 align-center justify-center">
+                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                </div>
+                <div class="d-flex w-100 h-100 align-center justify-center">
+                    <v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
+                </div>
+            </div>
+        </v-card-text>
+
+        <v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-else-if="!loading && !hasAnyData">
             <div class="d-flex flex-column align-center justify-center w-100 h-100">
                 <h2 style="margin-top: -40px">{{ $t('No data') }}</h2>
             </div>
         </v-card-text>
 
-        <v-chart autoresize class="overview-monthly-chart" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
+        <v-chart autoresize class="overview-monthly-chart-container" :class="{ 'readonly': !hasAnyData }" :option="chartOptions"/>
     </v-card>
 </template>
 
@@ -266,14 +289,19 @@ export default {
 </script>
 
 <style>
-.overview-monthly-chart-no-data-tips {
+.overview-monthly-chart-container {
+    width: 100%;
+    height: 400px;
+}
+
+.overview-monthly-chart-overlay {
     position: absolute !important;
     z-index: 10;
 }
 
-.overview-monthly-chart {
-    width: 100%;
-    height: 400px;
+.overview-monthly-chart-skeleton-container {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
 .overview-monthly-chart-tooltip-indicator {