TSK-1314: Fix slow Kanban open

packages/ui/src/components/Scroller.svelte

@@ -34,6 +34,7 @@
   export let buttons: boolean = false
   export let shrink: boolean = false
   export let divScroll: HTMLElement | undefined = undefined
+  export let checkForHeaders = false
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -89,22 +90,42 @@
       const trackH = divScroll.clientHeight - shiftTop - shiftBottom - 4
       const scrollH = divScroll.scrollHeight
       const proc = scrollH / trackH
-      divBar.style.height = divScroll.clientHeight / proc + 'px'
-      divBar.style.top = divScroll.scrollTop / proc + shiftTop + 2 + 'px'
-      if (mask === 'none') divBar.style.visibility = 'hidden'
-      else {
-        divBar.style.visibility = 'visible'
+
+      const newHeight = divScroll.clientHeight / proc + 'px'
+      if (divBar.style.height !== 'newHeight') {
+        divBar.style.height = newHeight
+      }
+      const newTop = divScroll.scrollTop / proc + shiftTop + 2 + 'px'
+      if (divBar.style.top !== newTop) {
+        divBar.style.top = newTop
+      }
+      if (mask === 'none') {
+        if (divBar.style.visibility !== 'hidden') {
+          divBar.style.visibility = 'hidden'
+        }
+      } else {
+        if (divBar.style.visibility !== 'visible') {
+          divBar.style.visibility = 'visible'
+        }
         if (divBar) {
           if (timer) {
             clearTimeout(timer)
-            divBar.style.opacity = '1'
+            if (divBar.style.opacity !== '1') {
+              divBar.style.opacity = '1'
+            }
           }
           timer = setTimeout(() => {
-            if (divBar) divBar.style.opacity = '0'
+            if (divBar) {
+              divBar.style.opacity = '0'
+            }
           }, 1500)
         }
       }
-      if (divScroll.clientHeight >= divScroll.scrollHeight) divBar.style.visibility = 'hidden'
+      if (divScroll.clientHeight >= divScroll.scrollHeight) {
+        if (divBar.style.visibility !== 'hidden') {
+          divBar.style.visibility = 'hidden'
+        }
+      }
     }
   }
   const checkBarH = (): void => {
@@ -220,6 +241,13 @@
     }
   }
 
+  let checkBarTimeout: any | undefined = undefined
+
+  const delayCall = (op: () => void) => {
+    clearTimeout(checkBarTimeout)
+    checkBarTimeout = setTimeout(op, 50)
+  }
+
   const checkFade = (): void => {
     if (divScroll) {
       beforeContent = divScroll.scrollTop
@@ -240,8 +268,8 @@
       if (inter.size) checkIntersectionFade()
       renderFade()
     }
-    if (!isScrolling) checkBar()
-    if (!isScrolling && horizontal) checkBarH()
+    if (!isScrolling) delayCall(checkBar)
+    if (!isScrolling && horizontal) delayCall(checkBarH)
   }
 
   function checkAutoScroll () {
@@ -336,8 +364,8 @@
     if (divScroll && divBox) {
       divScroll.addEventListener('wheel', wheelEvent)
       divScroll.addEventListener('scroll', checkFade)
-      checkBar()
-      if (horizontal) checkBarH()
+      delayCall(checkBar)
+      if (horizontal) delayCall(checkBarH)
     }
   })
   onDestroy(() => {
@@ -349,31 +377,46 @@
   })
 
   let oldTop: number
-  beforeUpdate(() => {
-    if (divBox && divScroll) oldTop = divScroll.scrollTop
-  })
-  afterUpdate(() => {
-    if (divBox && divScroll) {
-      if (oldTop !== divScroll.scrollTop) divScroll.scrollTop = oldTop
-
-      const tempEls = divBox.querySelectorAll('.categoryHeader')
-      observer = new IntersectionObserver(checkIntersection, { root: null, rootMargin: '0px', threshold: 0.1 })
-      tempEls.forEach((el) => observer.observe(el))
-      const tempCats = divBox.querySelectorAll('.lastCat')
-      if (tempCats.length > 0) {
-        hasLastCategories = true
-        tempCats.forEach((el) => observer.observe(el))
-      } else hasLastCategories = false
-    }
-  })
+
+  if (checkForHeaders) {
+    beforeUpdate(() => {
+      if (divBox && divScroll) {
+        oldTop = divScroll.scrollTop
+      }
+    })
+
+    afterUpdate(() => {
+      if (divBox && divScroll) {
+        if (oldTop !== divScroll.scrollTop) {
+          divScroll.scrollTop = oldTop
+        }
+
+        delayCall(() => {
+          const tempEls = divBox.querySelectorAll('.categoryHeader')
+          observer = new IntersectionObserver(checkIntersection, { root: null, rootMargin: '0px', threshold: 0.1 })
+          tempEls.forEach((el) => observer.observe(el))
+          const tempCats = divBox.querySelectorAll('.lastCat')
+          if (tempCats.length > 0) {
+            hasLastCategories = true
+            tempCats.forEach((el) => observer.observe(el))
+          } else {
+            hasLastCategories = false
+          }
+        })
+      }
+    })
+  }
 
   let divHeight: number
   const _resize = (): void => checkFade()
 
   const tapScroll = (n: number, dir: 'up' | 'down') => {
     if (divScroll) {
-      if (orientir === 'horizontal') divScroll.scrollBy({ top: 0, left: dir === 'up' ? -n : n, behavior: 'smooth' })
-      else divScroll.scrollBy({ top: dir === 'up' ? -n : n, left: 0, behavior: 'smooth' })
+      if (orientir === 'horizontal') {
+        divScroll.scrollBy({ top: 0, left: dir === 'up' ? -n : n, behavior: 'smooth' })
+      } else {
+        divScroll.scrollBy({ top: dir === 'up' ? -n : n, left: 0, behavior: 'smooth' })
+      }
     }
   }
 </script>

plugins/view-resources/src/components/list/ListView.svelte

@@ -48,7 +48,12 @@
 />
 
 <div class="w-full h-full py-4 clear-mins">
-  <Scroller fade={{ multipler: { top: 2.75 * viewOptions.groupBy.length, bottom: 0 } }} padding={'0 1rem'} noFade>
+  <Scroller
+    fade={{ multipler: { top: 2.75 * viewOptions.groupBy.length, bottom: 0 } }}
+    padding={'0 1rem'}
+    noFade
+    checkForHeaders
+  >
     <List
       bind:this={list}
       {_class}