From 46dd2888a6fe3f2281f090e10c9835b3f7d9884e Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 29 Sep 2025 19:19:35 +0800
Subject: [PATCH] show hint while loading the image

---
 src/components/mobile/AIImageRecognitionSheet.vue     |  9 ++++++++-
 src/locales/de.json                                   |  1 +
 src/locales/en.json                                   |  1 +
 src/locales/es.json                                   |  1 +
 src/locales/fr.json                                   |  1 +
 src/locales/it.json                                   |  1 +
 src/locales/ja.json                                   |  1 +
 src/locales/nl.json                                   |  1 +
 src/locales/pt_BR.json                                |  1 +
 src/locales/ru.json                                   |  1 +
 src/locales/th.json                                   |  1 +
 src/locales/uk.json                                   |  1 +
 src/locales/vi.json                                   |  1 +
 src/locales/zh_Hans.json                              |  1 +
 src/locales/zh_Hant.json                              |  1 +
 .../list/dialogs/AIImageRecognitionDialog.vue         | 11 +++++++++--
 16 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/mobile/AIImageRecognitionSheet.vue b/src/components/mobile/AIImageRecognitionSheet.vue
index fb2ac59f..55fb6973 100644
--- a/src/components/mobile/AIImageRecognitionSheet.vue
+++ b/src/components/mobile/AIImageRecognitionSheet.vue
@@ -15,7 +15,8 @@
                  style="height: 400px" @click="showOpenImage">
                 <img height="400px" :src="imageSrc" v-if="imageSrc" />
                 <div class="image-container-background display-flex justify-content-center align-items-center padding-horizontal" v-if="!imageSrc">
-                    <span>{{ tt('Click here to select a receipt or transaction image') }}</span>
+                    <span v-if=!loading>{{ tt('Click here to select a receipt or transaction image') }}</span>
+                    <span v-else-if="loading">{{ tt('Loading image...') }}</span>
                 </div>
             </div>
         </f7-page-content>
@@ -65,12 +66,18 @@ const imageFile = ref<File | null>(null);
 const imageSrc = ref<string | undefined>(undefined);
 
 function loadImage(file: File): void {
+    loading.value = true;
+    imageFile.value = null;
+    imageSrc.value = undefined;
+
     compressJpgImage(file, 1280, 1280, 0.8).then(blob => {
         imageFile.value = KnownFileType.JPG.createFileFromBlob(blob, "image");
         imageSrc.value = URL.createObjectURL(blob);
+        loading.value = false;
     }).catch(error => {
         imageFile.value = null;
         imageSrc.value = undefined;
+        loading.value = false;
         logger.error('failed to compress image', error);
         showToast('Unable to load image');
     });
diff --git a/src/locales/de.json b/src/locales/de.json
index 753020ba..f3d30be3 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Kategorie",
     "Secondary Category": "Secondary Category",
diff --git a/src/locales/en.json b/src/locales/en.json
index fac1200a..f081141b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Category",
     "Secondary Category": "Secondary Category",
diff --git a/src/locales/es.json b/src/locales/es.json
index 482bf3f5..49f02ba8 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categoría",
     "Secondary Category": "Secondary Category",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 936761d5..1239d442 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Impossible de reconnaître l'image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Glissez-déposez un reçu ou une image de transaction ici, ou cliquez pour en sélectionner une",
     "Release to load image": "Relâchez pour charger l'image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Cliquez ici pour sélectionner un reçu ou une image de transaction",
     "Category": "Catégorie",
     "Secondary Category": "Catégorie secondaire",
diff --git a/src/locales/it.json b/src/locales/it.json
index 121d2e69..a84f36bd 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categoria",
     "Secondary Category": "Categoria secondaria",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index a5739854..b6b89d18 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "カテゴリ",
     "Secondary Category": "二次カテゴリ",
diff --git a/src/locales/nl.json b/src/locales/nl.json
index e0ce490b..866a0068 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categorie",
     "Secondary Category": "Secundaire categorie",
diff --git a/src/locales/pt_BR.json b/src/locales/pt_BR.json
index ebe0c02d..dd9265ec 100644
--- a/src/locales/pt_BR.json
+++ b/src/locales/pt_BR.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Categoria",
     "Secondary Category": "Categoria Secundária",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 21fb336f..919d840c 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Категория",
     "Secondary Category": "Secondary Category",
diff --git a/src/locales/th.json b/src/locales/th.json
index eade9b49..9e5df234 100644
--- a/src/locales/th.json
+++ b/src/locales/th.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "ไม่สามารถจดจำรูปภาพได้",
     "Drag and drop a receipt or transaction image here, or click to select one": "ลากและวางใบเสร็จหรือรูปภาพรายการที่นี่ หรือคลิกเพื่อเลือก",
     "Release to load image": "ปล่อยเพื่อโหลดรูปภาพ",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "คลิกที่นี่เพื่อเลือกใบเสร็จหรือรูปภาพรายการ",
     "Category": "หมวดหมู่",
     "Secondary Category": "หมวดหมู่รอง",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 8849e338..dec268df 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Категорія",
     "Secondary Category": "Вторинна категорія",
diff --git a/src/locales/vi.json b/src/locales/vi.json
index ebe28fa5..0e168dd8 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "Unable to recognize image",
     "Drag and drop a receipt or transaction image here, or click to select one": "Drag and drop a receipt or transaction image here, or click to select one",
     "Release to load image": "Release to load image",
+    "Loading image...": "Loading image...",
     "Click here to select a receipt or transaction image": "Click here to select a receipt or transaction image",
     "Category": "Danh mục",
     "Secondary Category": "Secondary Category",
diff --git a/src/locales/zh_Hans.json b/src/locales/zh_Hans.json
index 015ef5f9..26e28db1 100644
--- a/src/locales/zh_Hans.json
+++ b/src/locales/zh_Hans.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "无法识别图片",
     "Drag and drop a receipt or transaction image here, or click to select one": "拖拽收据或交易图片到此处，或点击选择图片",
     "Release to load image": "释放以加载图片",
+    "Loading image...": "正在加载图片...",
     "Click here to select a receipt or transaction image": "点击这里选择收据或交易图片",
     "Category": "分类",
     "Secondary Category": "二级分类",
diff --git a/src/locales/zh_Hant.json b/src/locales/zh_Hant.json
index 4b102648..98030b7e 100644
--- a/src/locales/zh_Hant.json
+++ b/src/locales/zh_Hant.json
@@ -1737,6 +1737,7 @@
     "Unable to recognize image": "無法識別圖片",
     "Drag and drop a receipt or transaction image here, or click to select one": "將收據或交易圖片拖放到此處，或點擊以選擇圖片",
     "Release to load image": "放開以載入圖片",
+    "Loading image...": "正在載入圖片...",
     "Click here to select a receipt or transaction image": "點擊這裡選擇收據或交易圖片",
     "Category": "分類",
     "Secondary Category": "次分類",
diff --git a/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue b/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
index 816407d5..a515fc4b 100644
--- a/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/AIImageRecognitionDialog.vue
@@ -15,8 +15,9 @@
                      @drop.prevent="onDrop">
                     <div class="d-flex w-100 fill-height justify-center align-center justify-content-center px-4"
                          :class="{ 'dropzone': true, 'dropzone-dragover': isDragOver }" style="height: 480px">
-                        <h3 class="pa-2 bg-grey-200" v-if="!imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
-                        <h3 class="pa-2 bg-grey-200" v-if="isDragOver">{{ tt('Release to load image') }}</h3>
+                        <h3 class="pa-2 bg-grey-200" v-if="!loading && !imageFile && !isDragOver">{{ tt('Drag and drop a receipt or transaction image here, or click to select one') }}</h3>
+                        <h3 class="pa-2 bg-grey-200" v-if="!loading && isDragOver">{{ tt('Release to load image') }}</h3>
+                        <h3 class="pa-2" v-if="loading">{{ tt('Loading image...') }}</h3>
                     </div>
                     <v-img height="480px" :class="{ 'cursor-pointer': !loading && !recognizing && !isDragOver }"
                            :src="imageSrc" @click="showOpenImageDialog">
@@ -85,12 +86,18 @@ const imageSrc = ref<string | undefined>(undefined);
 const isDragOver = ref<boolean>(false);
 
 function loadImage(file: File): void {
+    loading.value = true;
+    imageFile.value = null;
+    imageSrc.value = undefined;
+
     compressJpgImage(file, 1280, 1280, 0.8).then(blob => {
         imageFile.value = KnownFileType.JPG.createFileFromBlob(blob, "image");
         imageSrc.value = URL.createObjectURL(blob);
+        loading.value = false;
     }).catch(error => {
         imageFile.value = null;
         imageSrc.value = undefined;
+        loading.value = false;
         logger.error('failed to compress image', error);
         snackbar.value?.showError('Unable to load image');
     });