diff --git a/changelog/unreleased/bugfix-lazy-loading-table b/changelog/unreleased/bugfix-lazy-loading-table new file mode 100644 index 000000000..68b487658 --- /dev/null +++ b/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 diff --git a/src/components/atoms/_OcTableCellData/_OcTableCellData.vue b/src/components/atoms/_OcTableCellData/_OcTableCellData.vue index 0be9c7f6d..627ddd1f5 100644 --- a/src/components/atoms/_OcTableCellData/_OcTableCellData.vue +++ b/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) } diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue index 2f5f3c0e8..7444c3e69 100644 --- a/src/components/molecules/OcTable/OcTable.vue +++ b/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", diff --git a/src/composables/useIsVisible/index.js b/src/composables/useIsVisible/index.js index 5d3e257dd..6c2bcb3c4 100644 --- a/src/composables/useIsVisible/index.js +++ b/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} 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}} */ -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, } diff --git a/src/composables/useIsVisible/index.spec.js b/src/composables/useIsVisible/index.spec.js index b029a5509..46f70a357 100644 --- a/src/composables/useIsVisible/index.spec.js +++ b/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()