From 3c6c1170e32bfecbc44e227fe755343a1b66c717 Mon Sep 17 00:00:00 2001
From: Zack Lee <zlee@carnegielearning.com>
Date: Fri, 4 Oct 2024 21:42:03 +0900
Subject: [PATCH] Refine Feature Flags Root Table Pagination on scroll

---
 ...lag-root-section-card-table.component.html |  3 +-
 ...-flag-root-section-card-table.component.ts | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
index 363a09b40c..ace857e9db 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/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/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
index 67adc6293c..5b97b59e59 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
@@ -44,6 +44,9 @@ 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) {}
 
@@ -51,10 +54,38 @@ export class FeatureFlagRootSectionCardTableComponent implements OnInit {
     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) =>