From 31a070c224856ff79d26e0c3177b8d22a39bd905 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Fri, 19 Jan 2024 17:32:23 +0100
Subject: [PATCH] klicker: Fix resizeobserver loop limit exceeded

---
 .../components/ui/b-scrolling-dashboard.vue   | 40 +++++++++----------
 klicker/components/ui/b-vega.vue              |  2 +-
 .../components/visualisations/v-barplot.vue   |  4 +-
 klicker/components/visualisations/v-roll.vue  |  4 +-
 4 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/klicker/components/ui/b-scrolling-dashboard.vue b/klicker/components/ui/b-scrolling-dashboard.vue
index 125f2791..84f4a038 100644
--- 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
index be514c1a..50ecd634 100644
--- 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
index ada59837..6674b01f 100644
--- a/klicker/components/visualisations/v-barplot.vue
+++ b/klicker/components/visualisations/v-barplot.vue
@@ -185,7 +185,7 @@ 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
       }
@@ -193,7 +193,7 @@ export default defineComponent({
       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
index dffb2806..2339b650 100644
--- 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, () => {