From d7c5686a40b2d19ebdfef4a2f4db4fd660a84e4f Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 24 Jun 2024 22:04:06 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Use=20determine=20type=20for=20r?=
 =?UTF-8?q?eader=20progress=20indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.json       |  1 +
 src/locales/zh-Hant.json  |  1 +
 src/mixins/reader.js      | 10 ++++++++++
 src/pages/reader.vue      |  8 +++++++-
 src/pages/reader/epub.vue | 11 ++++++-----
 src/pages/reader/pdf.vue  | 11 ++++++-----
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 750f9be45d..680403d3aa 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -858,6 +858,7 @@
     }
   },
   "preview": "Preview",
+  "reader_loading_label": "Loading",
   "RedirectPage": {
     "title": "Redirecting"
   },
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 63e58da76a..faf93be1cd 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -858,6 +858,7 @@
     }
   },
   "preview": "預覽",
+  "reader_loading_label": "載入中",
   "RedirectPage": {
     "title": "重新轉向"
   },
diff --git a/src/mixins/reader.js b/src/mixins/reader.js
index 815b1b5338..e09d941c60 100644
--- a/src/mixins/reader.js
+++ b/src/mixins/reader.js
@@ -35,6 +35,16 @@ export default {
     totalSizeInMB() {
       return (this.totalSize / (1024 * 1024)).toFixed(2);
     },
+    progressIndicatorType() {
+      return this.totalSize ? 'determinate' : 'indeterminate';
+    },
+    progressLabelText() {
+      return this.totalSize
+        ? `${this.progressSizeInMB} / ${this.totalSizeInMB} MB (${
+            this.progressPercent
+          }%)`
+        : this.$t('reader_loading_label');
+    },
   },
   methods: {
     async getFileBuffer(cacheKey) {
diff --git a/src/pages/reader.vue b/src/pages/reader.vue
index fc50fe9f29..1f3443e135 100644
--- a/src/pages/reader.vue
+++ b/src/pages/reader.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="fixed inset-0 flex flex-col items-center justify-center">
-    <ProgressIndicator v-if="isLoading" />
+    <div
+      v-if="isLoading"
+      class="fixed inset flex flex-col justify-center items-center bg-white gap-[16px]"
+    >
+      <ProgressIndicator />
+      <span class="text-like-green">{{ $t('reader_loading_label') }}</span>
+    </div>
     <Component
       :is="isLoginRequired ? 'AuthRequiredView' : 'div'"
       v-else
diff --git a/src/pages/reader/epub.vue b/src/pages/reader/epub.vue
index e0a0c72374..ad824b3b92 100644
--- a/src/pages/reader/epub.vue
+++ b/src/pages/reader/epub.vue
@@ -2,12 +2,13 @@
   <div>
     <div
       v-if="isLoading"
-      class="fixed inset-0 flex flex-col justify-center items-center"
+      class="fixed inset-0 flex flex-col justify-center items-center gap-[16px] bg-white"
     >
-      <ProgressIndicator />
-      <div class="text-like-green">
-        {{ progressSizeInMB }} / {{ totalSizeInMB }}MB ({{ progressPercent }}%)
-      </div>
+      <ProgressIndicator
+        :type="progressIndicatorType"
+        :value="progressPercent"
+      />
+      <span class="text-like-green text-center">{{ progressLabelText }}</span>
     </div>
     <div v-else class="flex items-center justify-between">
       <div class="grow" />
diff --git a/src/pages/reader/pdf.vue b/src/pages/reader/pdf.vue
index 6b8eea01c6..52b6518730 100644
--- a/src/pages/reader/pdf.vue
+++ b/src/pages/reader/pdf.vue
@@ -2,12 +2,13 @@
   <div class="w-full h-full">
     <div
       v-if="isLoading"
-      class="fixed inset-0 flex flex-col justify-center items-center"
+      class="fixed inset-0 flex flex-col justify-center items-center gap-[16px] bg-like-green"
     >
-      <ProgressIndicator />
-      <div class="text-white">
-        {{ progressSizeInMB }} / {{ totalSizeInMB }}MB ({{ progressPercent }}%)
-      </div>
+      <ProgressIndicator
+        :type="progressIndicatorType"
+        :value="progressPercent"
+      />
+      <span class="text-white text-center">{{ progressLabelText }}</span>
     </div>
     <iframe
       ref="pdfIframe"