From 314497c10754285f8e344b6299db85cabab8418b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 10 Sep 2024 14:25:26 +0200
Subject: [PATCH] fix(NcRichText): debounce the update of widget visibility

- IntersectionObserver triggered if any pixel of observed element appears in viewport for a moment
- with debouncing the update, it won't be triggered during programmatic smooth scroll (less than 100ms in viewport with this commit)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcReferenceWidget.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
index fedbeb131b..a1ae7755c6 100644
--- a/src/components/NcRichText/NcReferenceWidget.vue
+++ b/src/components/NcRichText/NcReferenceWidget.vue
@@ -34,6 +34,7 @@
 	</div>
 </template>
 <script>
+import debounce from 'debounce'
 import { useElementSize, useIntersectionObserver } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -71,10 +72,13 @@ export default {
 		// This is the widget root node
 		const widgetRoot = ref()
 		const { width } = useElementSize(widgetRoot)
+		const debounceUpdateVisible = debounce((value) => {
+			isVisible.value = value
+		}, 100)
 
 		useIntersectionObserver(widgetRoot, ([entry]) => {
 			nextTick(() => {
-				isVisible.value = entry.isIntersecting
+				debounceUpdateVisible(entry.isIntersecting)
 			})
 		})