feat: do not use language detection features on low end devices (#3317)

Co-authored-by: admin <admin@Sonar.lan>

Author: Cl0v1s

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>