From 062abcb2301599c9b9ffeeac131cc18568ee7131 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 21 Jul 2022 14:38:02 +0200
Subject: [PATCH 1/5] Move table lazy loading from OcTd to OcTr

---
 docs/components/tokens/IconList.vue           |  4 +-
 .../_OcTableCellData/_OcTableCellData.vue     | 74 +----------------
 .../atoms/_OcTableRow/_OcTableRow.vue         | 83 ++++++++++++++++++-
 src/components/molecules/OcTable/OcTable.vue  | 14 ++--
 4 files changed, 93 insertions(+), 82 deletions(-)

diff --git a/docs/components/tokens/IconList.vue b/docs/components/tokens/IconList.vue
index b532d1455..5e17e2b7a 100644
--- a/docs/components/tokens/IconList.vue
+++ b/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="{ colspan: fields.length }">
       <template #passive="{ item }">
         <oc-icon
           :name="item.filename"
@@ -139,7 +139,7 @@ export default {
           width: "expand",
           type: "slot",
         },
-      ].map(field => ({ ...field, lazy: true }))
+      ]
     },
   },
   mounted() {
diff --git a/src/components/atoms/_OcTableCellData/_OcTableCellData.vue b/src/components/atoms/_OcTableCellData/_OcTableCellData.vue
index 627ddd1f5..a65846fe5 100644
--- a/src/components/atoms/_OcTableCellData/_OcTableCellData.vue
+++ b/src/components/atoms/_OcTableCellData/_OcTableCellData.vue
@@ -1,6 +1,5 @@
 <template>
   <oc-table-cell
-    ref="observerTarget"
     type="td"
     :align-h="alignH"
     :align-v="alignV"
@@ -8,14 +7,11 @@
     :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>
diff --git a/src/components/atoms/_OcTableRow/_OcTableRow.vue b/src/components/atoms/_OcTableRow/_OcTableRow.vue
index 3934070fd..937d0a81d 100644
--- a/src/components/atoms/_OcTableRow/_OcTableRow.vue
+++ b/src/components/atoms/_OcTableRow/_OcTableRow.vue
@@ -1,12 +1,91 @@
 <template>
-  <tr tabindex="-1">
-    <slot />
+  <tr ref="observerTarget" tabindex="-1">
+    <slot v-if="isVisible" />
+    <oc-td v-else :colspan="lazy.colspan">
+      <span class="shimmer" />
+    </oc-td>
   </tr>
 </template>
 <script>
+import { customRef, ref } 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 { isVisible } = props.lazy
+      ? useIsVisible({
+          ...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>
diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index 7444c3e69..fc1e2c4ac 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -242,6 +242,14 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Determines if the table content should be loaded lazily.
+     */
+    lazy: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -366,6 +374,7 @@ export default {
     },
     extractTbodyTrProps(item, index) {
       return {
+        lazy: this.lazy,
         class: [
           "oc-tbody-tr",
           `oc-tbody-tr-${this.itemDomSelector(item) || index}`,
@@ -396,10 +405,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 +577,6 @@ export default {
           name: "resource",
           title: "Resource",
           alignH: "left",
-          lazy: true
         }, {
           name: "last_modified",
           title: "Last modified",

From 36caad7a174ef8710dc626aea2407a3cccea5c67 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 21 Jul 2022 15:53:32 +0200
Subject: [PATCH 2/5] Add changelog item, optimize lazy usage

---
 changelog/unreleased/bugfix-lazy-loading-table   |  4 +++-
 docs/components/tokens/IconList.vue              |  2 +-
 src/components/atoms/_OcTableRow/_OcTableRow.vue | 16 ++++++++++++----
 src/components/molecules/OcTable/OcTable.vue     |  7 +++----
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/changelog/unreleased/bugfix-lazy-loading-table b/changelog/unreleased/bugfix-lazy-loading-table
index 68b487658..6e1a2b4cf 100644
--- a/changelog/unreleased/bugfix-lazy-loading-table
+++ b/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
diff --git a/docs/components/tokens/IconList.vue b/docs/components/tokens/IconList.vue
index 5e17e2b7a..9fead1627 100644
--- a/docs/components/tokens/IconList.vue
+++ b/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" :lazy="{ colspan: fields.length }">
+    <oc-table :fields="fields" :data="filteredIcons" :lazy="true">
       <template #passive="{ item }">
         <oc-icon
           :name="item.filename"
diff --git a/src/components/atoms/_OcTableRow/_OcTableRow.vue b/src/components/atoms/_OcTableRow/_OcTableRow.vue
index 937d0a81d..bd8042a48 100644
--- a/src/components/atoms/_OcTableRow/_OcTableRow.vue
+++ b/src/components/atoms/_OcTableRow/_OcTableRow.vue
@@ -1,13 +1,13 @@
 <template>
   <tr ref="observerTarget" tabindex="-1">
-    <slot v-if="isVisible" />
-    <oc-td v-else :colspan="lazy.colspan">
+    <slot v-if="!isHidden" />
+    <oc-td v-else :colspan="lazyColspan">
       <span class="shimmer" />
     </oc-td>
   </tr>
 </template>
 <script>
-import { customRef, ref } from "@vue/composition-api"
+import { customRef, computed, ref } from "@vue/composition-api"
 import { useIsVisible } from "../../../composables"
 import OcTd from "../_OcTableCellData/_OcTableCellData.vue"
 
@@ -38,6 +38,11 @@ export default {
       }
     })
 
+    const lazyColspan = ref(null)
+    if (props.lazy) {
+      lazyColspan.value = props.lazy.colspan
+    }
+
     const { isVisible } = props.lazy
       ? useIsVisible({
           ...props.lazy,
@@ -45,9 +50,12 @@ export default {
         })
       : { isVisible: ref(true) }
 
+    const isHidden = computed(() => !isVisible.value)
+
     return {
       observerTarget,
-      isVisible,
+      isHidden,
+      lazyColspan,
     }
   },
 }
diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index fc1e2c4ac..f65061866 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -246,9 +246,8 @@ export default {
      * Determines if the table content should be loaded lazily.
      */
     lazy: {
-      type: Object,
-      required: false,
-      default: null,
+      type: Boolean,
+      default: false,
     },
   },
   data() {
@@ -374,7 +373,7 @@ export default {
     },
     extractTbodyTrProps(item, index) {
       return {
-        lazy: this.lazy,
+        ...(this.lazy && { lazy: { colspan: this.fields.length } }),
         class: [
           "oc-tbody-tr",
           `oc-tbody-tr-${this.itemDomSelector(item) || index}`,

From 086abcaee76e7cff294e4626945068df96a27ffb Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 21 Jul 2022 15:57:56 +0200
Subject: [PATCH 3/5] Invert lazy condition

---
 src/components/atoms/_OcTableRow/_OcTableRow.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/_OcTableRow/_OcTableRow.vue b/src/components/atoms/_OcTableRow/_OcTableRow.vue
index bd8042a48..5c59f1d9b 100644
--- a/src/components/atoms/_OcTableRow/_OcTableRow.vue
+++ b/src/components/atoms/_OcTableRow/_OcTableRow.vue
@@ -1,9 +1,9 @@
 <template>
   <tr ref="observerTarget" tabindex="-1">
-    <slot v-if="!isHidden" />
-    <oc-td v-else :colspan="lazyColspan">
+    <oc-td v-if="isHidden" :colspan="lazyColspan">
       <span class="shimmer" />
     </oc-td>
+    <slot v-else />
   </tr>
 </template>
 <script>

From 1d857bb4255559465e0506d51fd66f53984bed9f Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 21 Jul 2022 16:03:32 +0200
Subject: [PATCH 4/5] Use unref

---
 src/components/atoms/_OcTableRow/_OcTableRow.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/_OcTableRow/_OcTableRow.vue b/src/components/atoms/_OcTableRow/_OcTableRow.vue
index 5c59f1d9b..8c09c28a0 100644
--- a/src/components/atoms/_OcTableRow/_OcTableRow.vue
+++ b/src/components/atoms/_OcTableRow/_OcTableRow.vue
@@ -7,7 +7,7 @@
   </tr>
 </template>
 <script>
-import { customRef, computed, ref } from "@vue/composition-api"
+import { customRef, computed, ref, unref } from "@vue/composition-api"
 import { useIsVisible } from "../../../composables"
 import OcTd from "../_OcTableCellData/_OcTableCellData.vue"
 
@@ -50,7 +50,7 @@ export default {
         })
       : { isVisible: ref(true) }
 
-    const isHidden = computed(() => !isVisible.value)
+    const isHidden = computed(() => !unref(isVisible))
 
     return {
       observerTarget,

From 264493c8cccc3d31d7322fc92c38cfca00f61d3f Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 21 Jul 2022 16:08:55 +0200
Subject: [PATCH 5/5] Use computed prop for the colspan

---
 src/components/molecules/OcTable/OcTable.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index f65061866..1f9bb56c1 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/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>
@@ -276,7 +276,7 @@ export default {
       return result
     },
 
-    footerColspan() {
+    fullColspan() {
       return this.fields.length
     },
   },
@@ -373,7 +373,7 @@ export default {
     },
     extractTbodyTrProps(item, index) {
       return {
-        ...(this.lazy && { lazy: { colspan: this.fields.length } }),
+        ...(this.lazy && { lazy: { colspan: this.fullColspan } }),
         class: [
           "oc-tbody-tr",
           `oc-tbody-tr-${this.itemDomSelector(item) || index}`,