Ensure loading skeleton doesn't show up when scrolling between 2 pages

src/app/file-viewer/file-viewer.component.ts

@@ -28,7 +28,7 @@ import { Column, DuckdbService } from '../duckdb.service';
         showGridlines
         [scrollable]="true"
         scrollHeight="flex"
-        [rows]="100"
+        [rows]="numRows"
         [virtualScroll]="true"
         [virtualScrollItemSize]="46"
         [lazy]="true"
@@ -75,14 +75,8 @@ export class FileViewerComponent {
 
   // Can't be computed since effect has to run first so file exists in duckdb
   protected columns = signal<Column[]>([]);
+  protected numRows = 200;
 
-  private table = viewChild(Table);
-
-  // TODO: Basically make this an array of the same length as the number of rows, but an empty array.
-  //      We'll then store the actual current values in a separate array, then use the offset + row index
-  //      to get the actual value. This is so we don't store a crazy amount of data.
-  //      Alternative is to store current page data in the array (but keep the array length), and clear out the array each
-  //      time the page changes.
   protected currentValue = signal<any[]>([]);
 
   constructor() {
@@ -94,7 +88,7 @@ export class FileViewerComponent {
         const rows = await this.duckdbService.getRows(
           file,
           0,
-          100,
+          this.numRows,
           this.columns(),
           [],
           [],
@@ -117,7 +111,15 @@ export class FileViewerComponent {
         [],
       );
       // First clear out existing data, don't want to risk loading entire file into memory
-      this.currentValue().fill(undefined);
+      // Keep data in previous/next page so when user scrolls between 2 pages they don't see missing data
+      for (let i = 0; i < this.currentValue().length; i++) {
+        if (
+          i < event.first! - this.numRows ||
+          i > event.first! + event.rows! + this.numRows
+        ) {
+          this.currentValue()[i] = undefined;
+        }
+      }
       // Can't update the current value, otherwise we get an infinite loop
       this.currentValue().splice(event.first!, event.rows!, ...rows.rows);
       this.cdr.markForCheck();