feat: add option to show translation loading (#761)

# PR Checklist
- [ ] Have you checked if it works normally in all models? *Ignore this
if it doesn't use models.*
- [ ] Have you checked if it works normally in all web, local, and node
hosted versions? If it doesn't, have you blocked it in those versions?
- [ ] Have you added type definitions?

# Preview

![preview](https://github.com/user-attachments/assets/149c1bf4-c3cc-48c6-9d32-bf8e6a268f81)

# Description
This PR introduces following:
- New accessibility option for translation loading even when not
re-translating
- Prevent redundant translation attempts when auto translating

src/lang/en.ts

@@ -1050,6 +1050,7 @@ export const languageEnglish = {
         emptySelectedFirstMessageLabel: "WARN: Selected first message is empty",
     },
     bulkEnabling: "Lorebook Bulk Enabling",
+    showTranslationLoading: "Show Translation Loading",
     showDeprecatedTriggerV1: "Show Deprecated Trigger V1",
     triggerV1Warning: "Trigger V1 is deprecated. it might be removed in the future.",
     copy: "Copy",

src/lang/ko.ts

@@ -972,6 +972,7 @@ export const languageKorean = {
         "emptySelectedFirstMessageLabel": "경고: 선택된 첫 메시지가 비어있습니다"
     },
     "bulkEnabling": "한번에 로어북 활성화 버튼",
+    "showTranslationLoading": "번역 로딩 보이기",
     "showDeprecatedTriggerV1": "비권장 트리거 V1 보이기",
     "triggerV1Warning": "트리거 V1은 비권장입니다. 추후에 제거될 수 있습니다.",
     "copy": "복사",

src/lib/ChatScreens/Chat.svelte

@@ -154,14 +154,26 @@
                         }
                     }
 
+                    const lastTranslated = translated
+
                     setTimeout(() => {
                             translated = translateText
                     }, 10)
+
+                    // State change of `translated` triggers markParsing again,
+                    // causing redundant translation attempts
+                    if (lastTranslated !== translateText) {
+                        return;
+                    }
                 } catch (error) {
                     console.error(error)
                 }
             }
             if(translateText){
+                if (!retranslate && DBState.db.showTranslationLoading) {
+                    lastParsed = `<div class="flex justify-center items-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-textcolor"></div></div>`
+                }
+                
                 let doRetranslate = retranslate
                 retranslate = false
                 if(DBState.db.translatorType === 'llm' && DBState.db.translateBeforeHTMLFormatting){

src/lib/Setting/Pages/AccessibilitySettings.svelte

@@ -58,4 +58,8 @@
 
 <div class="flex items-center mt-2">
     <Check bind:check={DBState.db.bulkEnabling} name={language.bulkEnabling}/>
-</div>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={DBState.db.showTranslationLoading} name={language.showTranslationLoading}/>
+</div>

src/ts/storage/database.svelte.ts

@@ -901,6 +901,7 @@ export interface Database{
     inlayErrorResponse:boolean
     reasoningEffort:number
     bulkEnabling:boolean
+    showTranslationLoading: boolean
     showDeprecatedTriggerV1:boolean
 }