Merge pull request #2260 from owncloud/remove-buggy-debounce-lazy-tab…

…le-cells

Remove debounce from lazy loading option in OcTableCellData

changelog/unreleased/bugfix-lazy-loading-table

@@ -0,0 +1,5 @@
+Bugfix: Lazy loading render performance
+
+The render performance of the lazy loading option in tables (OcTable, OcTableSimple) has been improved by removing the debounce option.
+
+https://github.com/owncloud/owncloud-design-system/pull/2260

src/components/atoms/_OcTableCellData/_OcTableCellData.vue

@@ -44,8 +44,8 @@ export default {
       validator: wrap => (wrap ? /(break|nowrap|truncate)/.test(wrap) : true),
     },
     lazy: {
-      type: Object,
-      default: null,
+      type: [Boolean, Object],
+      default: false,
     },
   },
   setup(props) {
@@ -65,7 +65,7 @@ export default {
 
     const { isVisible } = props.lazy
       ? useIsVisible({
-          ...props.lazy,
+          ...(typeof props.lazy === "object" && props.lazy),
           target: observerTarget,
         })
       : { isVisible: ref(true) }

src/components/molecules/OcTable/OcTable.vue

@@ -572,9 +572,7 @@ export default {
           name: "resource",
           title: "Resource",
           alignH: "left",
-          lazy: {
-            delay: 1500
-          }
+          lazy: true
         }, {
           name: "last_modified",
           title: "Last modified",

src/composables/useIsVisible/index.js

@@ -1,30 +1,13 @@
 import { onBeforeUnmount, ref, watch } from "@vue/composition-api"
 
-/**
- * once ODS has lodash this debounce implementation can be replaced with the one from lodash.
- * @param delay
- * @param callback
- * @returns {(function(...[*]=): void)|*}
- */
-const debounce = (callback, delay = 0) => {
-  let id = null
-  return (...args) => {
-    window.clearTimeout(id)
-    id = window.setTimeout(() => {
-      callback.apply(null, args)
-    }, delay)
-  }
-}
-
 /**
  *
  * @param {Ref<Element>} target - ref with element to be observed
  * @param {('show'|'showHide')} mode - showHide shows and hides the element on screen enter or leave, show only detects entering the screen and the keeps it rendered
  * @param {string} rootMargin - margin that will be added around the element to detect visibility
- * @param {number} delay - defines the debounce delay of the visibility detection
  * @returns {{isVisible: Ref<boolean>}}
  */
-export const useIsVisible = ({ target, mode = "show", rootMargin = "100px", delay = 0 }) => {
+export const useIsVisible = ({ target, mode = "show", rootMargin = "100px" }) => {
   const isSupported = window && "IntersectionObserver" in window
   if (!isSupported) {
     return {
@@ -34,7 +17,7 @@ export const useIsVisible = ({ target, mode = "show", rootMargin = "100px", dela
 
   const isVisible = ref(false)
   const observer = new IntersectionObserver(
-    debounce(([{ isIntersecting }]) => {
+    ([{ isIntersecting }]) => {
       isVisible.value = isIntersecting
       /**
        * if given mode is `showHide` we need to keep the observation alive.
@@ -50,7 +33,7 @@ export const useIsVisible = ({ target, mode = "show", rootMargin = "100px", dela
       }
 
       observer.unobserve(target.value)
-    }, delay),
+    },
     {
       rootMargin,
     }

src/composables/useIsVisible/index.spec.js

@@ -99,23 +99,6 @@ describe("useIsVisible", () => {
     expect(observerMock.unobserve).toBeCalledTimes(0)
   })
 
-  it("gets delayed by a given value if many calls happen fast", async () => {
-    const { callback: observerCallback } = enableIntersectionObserver()
-    const wrapper = createWrapper({ delay: 5000, mode: "showHide" })
-
-    const checkIsVisibleAfter = async (expects, fastForward, isIntersecting) => {
-      observerCallback([{ isIntersecting }], fastForward)
-      await nextTick()
-      expect(wrapper.vm.$refs.target.innerHTML).toBe(String(expects))
-    }
-
-    await checkIsVisibleAfter(false, 4000, true)
-    await checkIsVisibleAfter(false, 2000, false)
-    await checkIsVisibleAfter(true, 5000, true)
-    await checkIsVisibleAfter(true, 4800, false)
-    await checkIsVisibleAfter(false, 10000, false)
-  })
-
   it("disconnects the observer before component gets unmounted", () => {
     const { mock: observerMock } = enableIntersectionObserver()
     const wrapper = createWrapper()