From 8b6f15a214ea5ae49fb9b11b276a8984c992d721 Mon Sep 17 00:00:00 2001
From: Clovis <clovis@bdx.town>
Date: Wed, 2 Jul 2025 17:32:12 +0200
Subject: [PATCH] feat: do not use language detection features on low end
 devices (#3317)

Co-authored-by: admin <admin@Sonar.lan>
---
 app/components/publish/PublishWidget.vue | 26 ++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/components/publish/PublishWidget.vue b/app/components/publish/PublishWidget.vue
index f693ca08..8c25f239 100644
--- a/app/components/publish/PublishWidget.vue
+++ b/app/components/publish/PublishWidget.vue
@@ -237,9 +237,13 @@ function stopQuestionMarkPropagation(e: KeyboardEvent) {
     e.stopImmediatePropagation()
 }
 
+const userSettings = useUserSettings()
+
+const optimizeForLowPerformanceDevice = computed(() => getPreferences(userSettings.value, 'optimizeForLowPerformanceDevice'))
+
 const languageDetectorInGlobalThis = 'LanguageDetector' in globalThis
-let supportsLanguageDetector = languageDetectorInGlobalThis && await (globalThis as any).LanguageDetector.availability() === 'available'
-let languageDetector: { detect: (arg0: string) => any }
+let supportsLanguageDetector = !optimizeForLowPerformanceDevice.value && languageDetectorInGlobalThis && await (globalThis as any).LanguageDetector.availability() === 'available'
+let languageDetector: { detect: (arg0: string, option: { signal: AbortSignal }) => any }
 // If the API is supported, but the model not loaded yet…
 if (languageDetectorInGlobalThis && !supportsLanguageDetector) {
   // …trigger the model download
@@ -255,26 +259,36 @@ function countLetters(text: string) {
   return letters.length
 }
 
-async function detectLanguage() {
+let detectLanguageAbortController = new AbortController()
+
+const detectLanguage = useDebounceFn(async () => {
   if (!supportsLanguageDetector) {
     return
   }
   if (!languageDetector) {
+    // maybe we dont want to mess with this with abort....
     languageDetector = await (globalThis as any).LanguageDetector.create()
   }
+  // we stop previously running language detection process
+  detectLanguageAbortController.abort()
+  detectLanguageAbortController = new AbortController()
   const text = htmlToText(editor.value?.getHTML() || '')
   if (!text || countLetters(text) <= 5) {
     draft.value.params.language = preferredLanguage.value
     return
   }
   try {
-    const detectedLanguage = (await languageDetector.detect(text))[0].detectedLanguage
+    const detectedLanguage = (await languageDetector.detect(text, { signal: detectLanguageAbortController.signal }))[0].detectedLanguage
     draft.value.params.language = detectedLanguage === 'und' ? preferredLanguage.value : detectedLanguage.substring(0, 2)
   }
-  catch {
+  catch (e) {
+    // if error or abort we end up there
+    if ((e as Error).name !== 'AbortError') {
+      console.error(e)
+    }
     draft.value.params.language = preferredLanguage.value
   }
-}
+}, 500)
 </script>
 
 <template>