TEC-632: OXD list table skeleton improvements and fixes

changelog.md

@@ -1,3 +1,11 @@
+2024-07-26 - 2ceb7b2988f8d3ffcdd46ffdd4d0316d485a10c1 - /components/ListTable/list-table.scss, /components/ListTable/listTable.vue, /components/ListTable/TableHeaderCell.vue- display selectable column header skeleton
+
+2024-07-26 - b709a7576bc44c621f64b91e15f174e7af9eeee5 - /components/ListTable/ListTable.vue - display selectable column skeleton
+
+2024-07-26 - dd1c3563dfa6d9d3c897a5d3ecc7632fa284f89d - /components/ListTable/TableHeaderCell.vue, /components/Skeleton/_variables.scss, /components/Skeleton/skeleton.scss, /components/Skeleton/skeleton.vue - highlight skeleton colour
+
+2024-07-26 - 7b223c63f057a7664719d2336b82c5ba4b6be3be - /components/ListTable/ListTable.vue, /components/ListTable/TableHeaderCell.vue - remove header max width
+
 2024-06-26 - f91c5a9ac899c5e8a431447d7611d95b9ca38cce - components/CardTable/Decorator/DefaultCardMobile.vue, components/CardTable/Decorator/DefaultCardWeb.vue, components/CardTable/Decorator/card.scss, components/ListTable/CellContainer.vue, components/ListTable/CellContainer.vue, components/ListTable/ListTable.vue, components/ListTable/TableHeader.vue, components/ListTable/TableHeaderCell.vue, components/src/core/components/ListTable/_variables.scss, components/ListTable/table-header-cell.scss, components/ListTable/table-header.scss - Fixed Skeleton loader related issues in VUE lists
 
 2024-06-24 - 26320f5efcb9e3023ef7cfb7d095042b6963f8dd - Icon/icons.ts - Add oxd-email & oxd-document-text-3 icons

components/src/core/components/ListTable/ListTable.vue

@@ -2,28 +2,27 @@
   <oxd-card-table-container>
     <oxd-card-thead>
       <oxd-card-tr :clickable="false">
-        <oxd-card-th v-if="selectable" class="oxd-padding-cell oxd-table-th">
-          <oxd-skeleton
-            v-if="loading && skeleton"
-            class="oxd-skeleton-checkbox"
-          />
-          <oxd-checkbox-input
-            v-else
-            v-model="selectAll"
-            :checkIcon="checkIcon"
-          />
+        <oxd-card-th
+          v-if="loading && skeleton"
+          class="oxd-padding-cell oxd-table-th"
+        >
+          <oxd-skeleton class="oxd-skeleton-checkbox" animateHighlighted />
+        </oxd-card-th>
+        <oxd-card-th
+          v-else-if="selectable"
+          class="oxd-padding-cell oxd-table-th"
+        >
+          <oxd-checkbox-input v-model="selectAll" :checkIcon="checkIcon" />
         </oxd-card-th>
 
         <oxd-card-th
-          v-for="header in headers"
+          v-for="header in computedHeaders"
           :key="header"
           :style="header.style"
           :class="header.class"
           :order="sortFields[header.sortField]"
           class="oxd-padding-cell oxd-table-th"
-          :loading="
-            loading && skeleton && !(header.name == 'action' && !header.title)
-          "
+          :loading="loading && skeleton"
           @order="onOrderChange($event, header)"
         >
           <oxd-icon
@@ -226,26 +225,25 @@ export default defineComponent({
       },
     });
 
+    const computedHeaders = computed(() => {
+      if (props.loading && props.skeleton) {
+        return props.headers.filter(
+          header => !(header.name === 'action' && !header.title),
+        );
+      }
+      return props.headers;
+    });
     const cardHeaders = computed(() => {
-      const headers = props.headers.map(header => {
-        if (header.name === 'action' && !header.title) {
-          return {
-            ...header,
-            hideOnLoading: true,
-          };
-        }
-        return header;
-      });
-      if (props.selectable) {
+      if (props.selectable || (props.loading && props.skeleton)) {
         return [
           {
             name: 'selector',
             cellType: 'oxd-table-cell-checkbox',
           },
-          ...headers,
+          ...computedHeaders.value,
         ];
       }
-      return headers;
+      return computedHeaders.value;
     });
 
     const checkIcon = computed(() => getCheckIcon(props.selected, props.items));
@@ -341,6 +339,7 @@ export default defineComponent({
       onOrderChange,
       computedItems,
       tableRowClasses,
+      computedHeaders,
     };
   },
 

components/src/core/components/ListTable/TableHeaderCell.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="oxd-table-header-cell" role="columnheader">
-    <oxd-skeleton
-      v-if="loading"
-      animate
-      :style="{maxWidth: '300px'}"
-    ></oxd-skeleton>
+    <oxd-skeleton v-if="loading" animateHighlighted></oxd-skeleton>
     <template v-else>
       <slot></slot>
       <oxd-card-th-sort

components/src/core/components/ListTable/__tests__/list-table.spec.ts

@@ -71,7 +71,7 @@ describe('ListTable > ListTable.vue', () => {
         headers: DUMMY_DATA.headers,
       },
     });
-    expect(wrapper.findAllComponents(Skeleton).length).toEqual(32); // 15 skeletons per column and one for each header
+    expect(wrapper.findAllComponents(Skeleton).length).toEqual(48); // 15 skeletons per column and one for each header with select column
   });
 
   it('should render skeleton if partial render is true && not loading', () => {

components/src/core/components/ListTable/list-table.scss

@@ -48,7 +48,6 @@
   width: fit-content;
 }
 ::v-deep(.oxd-skeleton-checkbox) {
-  margin: 0;
   width: 16px;
   height: 16px;
   border-radius: 0.375rem;

components/src/core/components/Skeleton/Skeleton.vue

@@ -37,6 +37,10 @@ export default defineComponent({
       type: Number,
       default: 1,
     },
+    animateHighlighted: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -45,6 +49,7 @@ export default defineComponent({
         'oxd-skeleton': true,
         '--circle': this.circle,
         '--animate': this.animate,
+        '--animate-highlighted': this.animateHighlighted,
       };
     },
     styles() {

components/src/core/components/Skeleton/_variables.scss

@@ -1,2 +1,3 @@
 $skeleton-background-color: $oxd-background-light-gray-color !default;
 $skeleton-shine-color: $oxd-interface-gray-lighten-1-color !default;
+$skeleton-background-highlighted-color: darken($oxd-background-light-gray-color, 5%) !default;

components/src/core/components/Skeleton/skeleton.scss

@@ -34,6 +34,26 @@
     width: 1.2rem;
     border-radius: 100%;
   }
+  &.--animate-highlighted {
+    background-color: $skeleton-background-highlighted-color;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      animation: loading 1.5s infinite;
+      background: linear-gradient(
+                      90deg,
+                      rgba($skeleton-shine-color, 0),
+                      rgba($skeleton-shine-color, 0.6),
+                      rgba($skeleton-shine-color, 0)
+      );
+      transform: translate(-100%);
+    }
+  }
 }
 
 @keyframes loading {

components/src/styles/_colors.scss

@@ -53,5 +53,4 @@ $oxd-secondary-gradient: linear-gradient(
 
 /* OXD - Other Theme Colors */
 $oxd-primary-input-color: $oxd-primary-one-color !default;
-$oxd-progress-bar-background-color: #f2fce6 !default;
-
+$oxd-progress-bar-background-color: #f2fce6 !default;