Fixed #9316 - Table lazy virtual scroll triggers multiple separate ca…

…lls to `onLazyLoad()` function
primefaces · Nov 17, 2020 · 1049368 · 1049368
1 parent 1694d9d
commit 1049368
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 37 deletions.
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -215,7 +215,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
 
     @Input() virtualScroll: boolean;
 
-    @Input() virtualScrollDelay: number = 150;
+    @Input() virtualScrollDelay: number = 250;
 
     @Input() virtualRowHeight: number = 28;
 
@@ -2361,10 +2361,12 @@ export class ScrollableView implements AfterViewInit,OnDestroy {
 
     preventBodyScrollPropagation: boolean;
 
-    loadedPages: number[] = [];
-
     _scrollHeight: string;
 
+    virtualScrollTimeout: any;
+
+    virtualPage: number;
+
     @Input() get scrollHeight(): string {
         return this._scrollHeight;
     }
@@ -2496,44 +2498,31 @@ export class ScrollableView implements AfterViewInit,OnDestroy {
 
     onScrollIndexChange(index: number) {
         if (this.dt.lazy) {
-            let pageRange = this.createPageRange(Math.floor(index / this.dt.rows));
-            pageRange.forEach(page => this.loadPage(page));
-        }
-    }
-
-    createPageRange(page: number) {
-        let range: number[] = [];
-
-        if (page !== 0) {
-            range.push(page - 1);
-        }
-        range.push(page);
-        if (page !== (this.getPageCount() - 1)) {
-            range.push(page + 1);
-        }
-
-        return range;
-    }
+            if (this.virtualScrollTimeout) {
+                clearTimeout(this.virtualScrollTimeout);
+            }
 
-    loadPage(page: number) {
-        if (!this.loadedPages.includes(page)) {
-            this.dt.onLazyLoad.emit({
-                first: this.dt.rows * page,
-                rows: this.dt.rows,
-                sortField: this.dt.sortField,
-                sortOrder: this.dt.sortOrder,
-                filters: this.dt.filters,
-                globalFilter: this.dt.filters && this.dt.filters['global'] ? (<FilterMetadata> this.dt.filters['global']).value : null,
-                multiSortMeta: this.dt.multiSortMeta
-            });
-            this.loadedPages.push(page);
+            this.virtualScrollTimeout = setTimeout(() => {
+                let page = Math.floor(index / this.dt.rows);
+                let virtualScrollOffset = page === 0 ? 0 : (page - 1) * this.dt.rows;
+                let virtualScrollChunkSize = page === 0 ? this.dt.rows * 2 : this.dt.rows * 3;
+
+                if (page !== this.virtualPage) {
+                    this.virtualPage = page;
+                    this.dt.onLazyLoad.emit({
+                        first: virtualScrollOffset,
+                        rows: virtualScrollChunkSize,
+                        sortField: this.dt.sortField,
+                        sortOrder: this.dt.sortOrder,
+                        filters: this.dt.filters,
+                        globalFilter: this.dt.filters && this.dt.filters['global'] ? (<FilterMetadata> this.dt.filters['global']).value : null,
+                        multiSortMeta: this.dt.multiSortMeta
+                    });
+                }
+            }, this.dt.virtualScrollDelay);
         }
     }
 
-    clearCache() {
-        this.loadedPages = [];
-    }
-
     getPageCount() {
         let dataToRender = this.dt.filteredValue || this.dt.value;
         let dataLength = dataToRender ? dataToRender.length: 0;

diff --git a/src/app/showcase/components/table/tabledemo.html b/src/app/showcase/components/table/tabledemo.html
@@ -3086,6 +3086,12 @@ <h3>Properties</h3>
                             <td>false</td>
                             <td>Whether the data should be loaded on demand during scroll.</td>
                         </tr>
+                        <tr>
+                            <td>virtualScrollDelay</td>
+                            <td>number</td>
+                            <td>250</td>
+                            <td>Threshold in milliseconds to delay lazy loading during scrolling.</td>
+                        </tr>
                         <tr>
                             <td>virtualRowHeight</td>
                             <td>number</td>