Refine Feature Flags Root Table Pagination on scroll

CarnegieLearningWeb · Oct 4, 2024 · 3c6c117 · 3c6c117
1 parent fee28b8
commit 3c6c117
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/.../feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html b/.../feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
@@ -1,4 +1,4 @@
-<div scroll (wheel)="fetchFlagsOnScroll()" class="flag-list-table-container" #tableContainer>
+<div class="flag-list-table-container" #tableContainer>
   <mat-progress-bar class="spinner" mode="indeterminate" *ngIf="isLoading$ | async"></mat-progress-bar>
   <table
     class="flag-list-table"
@@ -111,4 +111,5 @@
       </td>
     </tr>
   </table>
+  <div #bottomTrigger></div>
 </div>
diff --git a/...rd/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts b/...rd/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
@@ -44,17 +44,48 @@ export class FeatureFlagRootSectionCardTableComponent implements OnInit {
 
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   @ViewChild('tableContainer') tableContainer: ElementRef;
+  @ViewChild('bottomTrigger') bottomTrigger: ElementRef;
+
+  private observer: IntersectionObserver;
 
   constructor(private featureFlagsService: FeatureFlagsService) {}
 
   ngOnInit() {
     this.sortTable();
   }
 
+  ngAfterViewInit() {
+    this.setupIntersectionObserver();
+  }
+
   ngOnChanges() {
     this.sortTable();
   }
 
+  ngOnDestroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  private setupIntersectionObserver() {
+    const options = {
+      root: this.tableContainer.nativeElement,
+      rootMargin: '100px',
+      threshold: 0.1,
+    };
+
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        this.fetchFlagsOnScroll();
+      }
+    }, options);
+
+    if (this.bottomTrigger) {
+      this.observer.observe(this.bottomTrigger.nativeElement);
+    }
+  }
+
   private sortTable() {
     if (this.dataSource$?.data) {
       this.dataSource$.sortingDataAccessor = (item, property) =>