klicker: Fix resizeobserver loop limit exceeded

schneefux · Jan 19, 2024 · 31a070c · 31a070c
1 parent 7b191d0
commit 31a070c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 26 deletions.
diff --git a/klicker/components/ui/b-scrolling-dashboard.vue b/klicker/components/ui/b-scrolling-dashboard.vue
@@ -105,28 +105,26 @@ export default defineComponent({
 
     const arrivedLeft = ref<boolean>(true)
     const arrivedRight = ref<boolean>(true)
-    const onUpdate = (cause: 'scroll'|'rerender') => {
-      requestAnimationFrame(() => {
-        if (cause == 'scroll') {
-          emit(cause, {
-            x: scroll.x.value,
-            arrivedLeft: scroll.arrivedState.left,
-            arrivedRight: scroll.arrivedState.right,
-          })
-        }
-        if (cause == 'rerender') {
-          emit(cause, {
-            x: scroll.x.value,
-            arrivedLeft: scroll.arrivedState.left,
-            arrivedRight: scroll.arrivedState.right,
-          })
-        }
+    const onUpdate = (cause: 'scroll'|'rerender') => requestAnimationFrame(() => {
+      if (cause == 'scroll') {
+        emit(cause, {
+          x: scroll.x.value,
+          arrivedLeft: scroll.arrivedState.left,
+          arrivedRight: scroll.arrivedState.right,
+        })
+      }
+      if (cause == 'rerender') {
+        emit(cause, {
+          x: scroll.x.value,
+          arrivedLeft: scroll.arrivedState.left,
+          arrivedRight: scroll.arrivedState.right,
+        })
+      }
 
-        const scrollable = wrapper.value != undefined && wrapper.value.scrollWidth > wrapper.value.clientWidth
-        arrivedLeft.value = scroll.arrivedState.left || !scrollable
-        arrivedRight.value = scroll.arrivedState.right || !scrollable
-      })
-    }
+      const scrollable = wrapper.value != undefined && wrapper.value.scrollWidth > wrapper.value.clientWidth
+      arrivedLeft.value = scroll.arrivedState.left || !scrollable
+      arrivedRight.value = scroll.arrivedState.right || !scrollable
+    })
 
     const scroll = useScroll(wrapper, {
       onScroll: () => onUpdate('scroll'),

diff --git a/klicker/components/ui/b-vega.vue b/klicker/components/ui/b-vega.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import embed, { Result, VisualizationSpec } from 'vega-embed'
+import embed, { VisualizationSpec } from 'vega-embed'
 import Fa from '../fa.vue'
 import { faDownload } from '@fortawesome/free-solid-svg-icons'
 import BShimmer from './b-shimmer.vue'

diff --git a/klicker/components/visualisations/v-barplot.vue b/klicker/components/visualisations/v-barplot.vue
@@ -185,15 +185,15 @@ export default defineComponent({
     const pageSize = ref(values.value.length)
     const wrapper = ref<HTMLElement>()
 
-    useResizeObserver(wrapper, ([ entry ]) => {
+    useResizeObserver(wrapper, ([ entry ]) => window.requestAnimationFrame(() => {
       if (wrapper.value == undefined) {
         return
       }
 
       const pxAvailableWidth = entry.contentRect.width - 100
       const pxPerBar = 12
       pageSize.value = Math.min(Math.max(Math.floor(pxAvailableWidth / pxPerBar), 1), values.value.length)
-    })
+    }))
 
     return {
       wrapper,

diff --git a/klicker/components/visualisations/v-roll.vue b/klicker/components/visualisations/v-roll.vue
@@ -175,7 +175,7 @@ export default defineComponent({
       nextTick(() => pageSize.value = calculatePageSize())
     }
 
-    useResizeObserver(wrapper, ([ entry ]) => {
+    useResizeObserver(wrapper, ([ entry ]) => window.requestAnimationFrame(() => {
       if (wrapper.value == undefined) {
         return
       }
@@ -189,7 +189,7 @@ export default defineComponent({
       pxPreviousWidth.value = pxWholeWidth
 
       updatePageSize()
-    })
+    }))
 
     const previousItemsLength = ref(body.value.length)
     watch(() => body.value, () => {