Merge pull request #2266 from owncloud/move-lazy-loading-to-tr

Move table lazy loading from OcTd to OcTr

changelog/unreleased/bugfix-lazy-loading-table

@@ -1,5 +1,7 @@
 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.
+The render performance of the lazy loading option in tables (OcTable, OcTableSimple) has been improved by removing the debounce option and by moving the lazy loading visualization from the OcTd to the OcTr component. For lazy loading, the colspan property has to be provided now.
 
 https://github.com/owncloud/owncloud-design-system/pull/2260
+https://github.com/owncloud/owncloud-design-system/pull/2266
+https://github.com/owncloud/web/issues/7038

docs/components/tokens/IconList.vue

@@ -10,7 +10,7 @@
     <div class="oc-mb oc-px">
       <strong>Displaying {{ filteredIcons.length }} out of {{ icons.length }} icons</strong>
     </div>
-    <oc-table :fields="fields" :data="filteredIcons">
+    <oc-table :fields="fields" :data="filteredIcons" :lazy="true">
       <template #passive="{ item }">
         <oc-icon
           :name="item.filename"
@@ -139,7 +139,7 @@ export default {
           width: "expand",
           type: "slot",
         },
-      ].map(field => ({ ...field, lazy: true }))
+      ]
     },
   },
   mounted() {

src/components/atoms/_OcTableCellData/_OcTableCellData.vue

@@ -1,21 +1,17 @@
 <template>
   <oc-table-cell
-    ref="observerTarget"
     type="td"
     :align-h="alignH"
     :align-v="alignV"
     :width="width"
     :wrap="wrap"
     class="oc-td"
   >
-    <slot v-if="isVisible" />
-    <span v-else class="shimmer"></span>
+    <slot />
   </oc-table-cell>
 </template>
 <script>
 import OcTableCell from "../_OcTableCell/_OcTableCell.vue"
-import { customRef, ref } from "@vue/composition-api"
-import { useIsVisible } from "../../../composables"
 
 export default {
   name: "OcTd",
@@ -43,74 +39,6 @@ export default {
       default: null,
       validator: wrap => (wrap ? /(break|nowrap|truncate)/.test(wrap) : true),
     },
-    lazy: {
-      type: [Boolean, Object],
-      default: false,
-    },
-  },
-  setup(props) {
-    const observerTarget = customRef((track, trigger) => {
-      let $el
-      return {
-        get() {
-          track()
-          return $el
-        },
-        set(value) {
-          $el = value.$el
-          trigger()
-        },
-      }
-    })
-
-    const { isVisible } = props.lazy
-      ? useIsVisible({
-          ...(typeof props.lazy === "object" && props.lazy),
-          target: observerTarget,
-        })
-      : { isVisible: ref(true) }
-
-    return {
-      observerTarget,
-      isVisible,
-    }
   },
 }
 </script>
-<style lang="scss">
-.shimmer {
-  background-color: var(--oc-color-input-text-muted);
-  bottom: 12px;
-  display: inline-block;
-  left: var(--oc-space-small);
-  opacity: 0.2;
-  overflow: hidden;
-  position: absolute;
-  right: var(--oc-space-small);
-  top: 12px;
-
-  &::after {
-    animation: shimmer 2s infinite;
-    background-image: linear-gradient(
-      90deg,
-      rgba(#fff, 0) 0,
-      rgba(#fff, 0.2) 20%,
-      rgba(#fff, 0.5) 60%,
-      rgba(#fff, 0)
-    );
-    bottom: 0;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(-100%);
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-</style>

src/components/atoms/_OcTableRow/_OcTableRow.vue

@@ -1,12 +1,99 @@
 <template>
-  <tr tabindex="-1">
-    <slot />
+  <tr ref="observerTarget" tabindex="-1">
+    <oc-td v-if="isHidden" :colspan="lazyColspan">
+      <span class="shimmer" />
+    </oc-td>
+    <slot v-else />
   </tr>
 </template>
 <script>
+import { customRef, computed, ref, unref } from "@vue/composition-api"
+import { useIsVisible } from "../../../composables"
+import OcTd from "../_OcTableCellData/_OcTableCellData.vue"
+
 export default {
   name: "OcTr",
   status: "ready",
   release: "1.0.0",
+  components: { OcTd },
+  props: {
+    lazy: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  setup(props) {
+    const observerTarget = customRef((track, trigger) => {
+      let $el
+      return {
+        get() {
+          track()
+          return $el
+        },
+        set(value) {
+          $el = value
+          trigger()
+        },
+      }
+    })
+
+    const lazyColspan = ref(null)
+    if (props.lazy) {
+      lazyColspan.value = props.lazy.colspan
+    }
+
+    const { isVisible } = props.lazy
+      ? useIsVisible({
+          ...props.lazy,
+          target: observerTarget,
+        })
+      : { isVisible: ref(true) }
+
+    const isHidden = computed(() => !unref(isVisible))
+
+    return {
+      observerTarget,
+      isHidden,
+      lazyColspan,
+    }
+  },
 }
 </script>
+<style lang="scss">
+.shimmer {
+  background-color: var(--oc-color-input-text-muted);
+  bottom: 12px;
+  display: inline-block;
+  left: var(--oc-space-small);
+  opacity: 0.2;
+  overflow: hidden;
+  position: absolute;
+  right: var(--oc-space-small);
+  top: 12px;
+
+  &::after {
+    animation: shimmer 2s infinite;
+    background-image: linear-gradient(
+      90deg,
+      rgba(#fff, 0) 0,
+      rgba(#fff, 0.2) 20%,
+      rgba(#fff, 0.5) 60%,
+      rgba(#fff, 0)
+    );
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+</style>

src/components/molecules/OcTable/OcTable.vue

@@ -78,7 +78,7 @@
     </oc-tbody>
     <tfoot v-if="$slots.footer" class="oc-table-footer">
       <tr class="oc-table-footer-row">
-        <td :colspan="footerColspan" class="oc-table-footer-cell">
+        <td :colspan="fullColspan" class="oc-table-footer-cell">
           <!-- @slot Footer of the table -->
           <slot name="footer" />
         </td>
@@ -242,6 +242,13 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Determines if the table content should be loaded lazily.
+     */
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -269,7 +276,7 @@ export default {
       return result
     },
 
-    footerColspan() {
+    fullColspan() {
       return this.fields.length
     },
   },
@@ -366,6 +373,7 @@ export default {
     },
     extractTbodyTrProps(item, index) {
       return {
+        ...(this.lazy && { lazy: { colspan: this.fullColspan } }),
         class: [
           "oc-tbody-tr",
           `oc-tbody-tr-${this.itemDomSelector(item) || index}`,
@@ -396,10 +404,6 @@ export default {
         props["aria-label"] = field.accessibleLabelCallback(item)
       }
 
-      if (Object.prototype.hasOwnProperty.call(field, "lazy")) {
-        props.lazy = field.lazy
-      }
-
       return props
     },
     extractCellProps(field) {
@@ -572,7 +576,6 @@ export default {
           name: "resource",
           title: "Resource",
           alignH: "left",
-          lazy: true
         }, {
           name: "last_modified",
           title: "Last modified",