Implemented VirtualScrolling

src/assets/styles/app.scss

@@ -40,6 +40,18 @@
     border-top-right-radius: $val;
 }
 
+@keyframes pulse {
+    0% {
+        background-color: rgba(165, 165, 165, 0.1)
+    }
+    50% {
+        background-color: rgba(165, 165, 165, 0.3)
+    }
+    100% {
+        background-color: rgba(165, 165, 165, 0.1)
+    }
+}
+
 $focusBorderColor:#8dcdff;
 
 body {

src/components/datatable/DataTable.vue

@@ -1507,7 +1507,7 @@ export default {
             if(this.virtualScrollTimer) {
                 clearTimeout(this.virtualScrollTimer);
             }
-                
+
             this.virtualScrollTimer = setTimeout(() => {
                 this.$emit('virtual-scroll', {
                         first: (event.page - 1) * this.rows,

src/components/datatable/ScrollableView.vue

@@ -22,6 +22,7 @@
                 <colgroup class="p-datatable-scrollable-colgroup">
                     <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
                 </colgroup>
+                <DTTableLoadingBody :columns="columns" :rows="rows" />
             </table>
             <div class="p-datatable-virtual-scroller" ref="virtualScroller"></div>
         </div>
@@ -40,6 +41,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import TableLoadingBody from './TableLoadingBody';
 
 export default {
     props: {
@@ -128,7 +130,7 @@ export default {
             if (this.$refs.scrollFooterBox) {
                 this.$refs.scrollFooterBox.style.marginLeft = -1 * this.$refs.scrollBody.scrollLeft + 'px';
             }
-            
+
             if (this.virtualScroll) {
                 let viewport = DomHandler.getClientHeight(this.$refs.scrollBody);
                 let tableHeight = DomHandler.getOuterHeight(this.$refs.scrollTable);
@@ -231,6 +233,9 @@ export default {
         bodyTableStyle() {
             return this.virtualScroll ? {top: '0'} : null;
         }
+    },
+    components: {
+        'DTTableLoadingBody': TableLoadingBody
     }
 }
 </script>

src/components/datatable/TableLoadingBody.vue

@@ -0,0 +1,29 @@
+<template>
+    <tbody class="p-datatable-tbody">
+        <tr v-for="n in rows" :key="n">
+            <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i">
+                <DTColumnSlot :column="col" :index="i" type="loading" />
+            </td>
+        </tr>
+    </tbody>
+</template>
+
+<script>
+import ColumnSlot from './ColumnSlot';
+
+export default {
+    props: {
+        columns: {
+            type: null,
+            default: null
+        },
+        rows: {
+            type: null,
+            default: null
+        }
+    },
+    components: {
+        'DTColumnSlot': ColumnSlot
+    }
+}
+</script>

src/views/datatable/DataTableScrollDemo.vue

@@ -21,10 +21,26 @@
             <h3>Virtual Scroll</h3>
 			<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20"
                 :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
-                <Column field="vin" header="Vin"></Column>
-                <Column field="year" header="Year"></Column>
-                <Column field="brand" header="Brand"></Column>
-                <Column field="color" header="Color"></Column>
+                <Column field="vin" header="Vin">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
+                <Column field="year" header="Year">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
+                <Column field="color" header="Color">
+                    <template #loading>
+                        <span class="loading-text"></span>
+                    </template>
+                </Column>
             </DataTable>
 
             <h3>Horizontal and Vertical</h3>
@@ -154,7 +170,7 @@ export default {
 
         setTimeout(() => {
             this.lazyCars = this.loadChunk(0, 40);
-            this.lazyTotalRecords = 250000;    
+            this.lazyTotalRecords = 250000;
         }, 250);
     },
     methods: {
@@ -162,21 +178,21 @@ export default {
             let chunk = [];
             for (let i = 0; i < length; i++) {
                 chunk[i] = {...this.inmemoryData[i], ...{vin: (index + i)}};
-            } 
+            }
 
             return chunk;
         },
         onVirtualScroll(event) {
             /*
-                For demo purposes keep loading the same dataset, 
-                in a real production application, this data should come from server by building the query with LazyLoadEvent options 
+                For demo purposes keep loading the same dataset,
+                in a real production application, this data should come from server by building the query with LazyLoadEvent options
             */
             setTimeout(() => {
                 //last chunk
                 if (event.first === 249980)
                     this.lazyCars = this.loadChunk(event.first, 20)
-                else 
-                    this.lazyCars = this.loadChunk(event.first, event.rows)    
+                else
+                    this.lazyCars = this.loadChunk(event.first, event.rows)
             }, 250);
         }
     },
@@ -184,4 +200,15 @@ export default {
         'DataTableSubMenu': DataTableSubMenu
     }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.loading-text {
+    display: block;
+    background-color: #f1f1f1;
+    min-height: 19px;
+    animation: pulse 1s infinite ease-in-out;
+    text-indent: -99999px;
+    overflow: hidden;
+}
+</style>