Fix/ab#85861 infinite scrolling not triggered when elements take less space than height

libs/shared/src/lib/components/widgets/summary-card-settings/summary-card-settings.component.html

@@ -50,12 +50,14 @@
         }}</span>
       </ng-container>
       <ng-template uiTabContent>
-        <shared-summary-card
-          id="widgetPreview"
-          [settings]="widgetFormGroup.value"
-          [widget]="widget"
-        >
-        </shared-summary-card>
+        <div class="max-h-[80vh]">
+          <shared-summary-card
+            id="widgetPreview"
+            [settings]="widgetFormGroup.value"
+            [widget]="widget"
+          >
+          </shared-summary-card>
+        </div>
       </ng-template>
     </ui-tab>
     <!-- Available actions -->

libs/shared/src/lib/components/widgets/summary-card/summary-card.component.scss

@@ -4,7 +4,6 @@
   gap: 16px;
   grid-auto-flow: row;
   background-color: unset;
-  max-height: 80vh;
 
   .k-card {
     border: none;

libs/shared/src/lib/components/widgets/summary-card/summary-card.component.ts

@@ -148,6 +148,8 @@ export class SummaryCardComponent
   private scrollEventBindTimeout!: NodeJS.Timeout;
   /** Subject to emit signals for cancelling previous data queries */
   private cancelRefresh$ = new Subject<void>();
+  /** Timeout for DOM synchronization */
+  private timeoutListener!: NodeJS.Timeout;
 
   /** @returns Get query filter */
   get queryFilter(): CompositeFilterDescriptor {
@@ -362,6 +364,9 @@ export class SummaryCardComponent
     if (this.scrollEventBindTimeout) {
       clearTimeout(this.scrollEventListener);
     }
+    if (this.timeoutListener) {
+      clearTimeout(this.timeoutListener);
+    }
   }
 
   /**
@@ -381,10 +386,11 @@ export class SummaryCardComponent
         // On switching views, summary card element ref is destroyed
         // and all events attached to it are not working as they are bind to
         // previous element, therefor we have to set them again
-        this.scrollEventBindTimeout = setTimeout(
-          () => this.bindCardsScrollListener(),
-          0
-        );
+        this.scrollEventBindTimeout = setTimeout(() => {
+          this.scrolling = false;
+          this.bindCardsScrollListener();
+          this.checkDataLengthForScrolling();
+        }, 0);
       } else {
         // Clean previously attached scroll listener as the element ref is destroyed
         if (this.scrollEventListener) {
@@ -526,6 +532,7 @@ export class SummaryCardComponent
         );
         this.cards = this.sortedCachedCards.slice(0, this.pageInfo.pageSize);
         this.pageInfo.length = this.sortedCachedCards.length;
+        this.checkDataLengthForScrolling();
       }
     }
   }
@@ -566,8 +573,11 @@ export class SummaryCardComponent
     }
 
     // update card list and scroll behavior according to the card items display
+    this.cards =
+      this.scrolling && !this.triggerRefreshCardList
+        ? [...this.cards, ...newCards]
+        : newCards;
 
-    this.cards = newCards;
     if (
       this.settings.widgetDisplay?.usePagination ||
       this.triggerRefreshCardList
@@ -588,6 +598,7 @@ export class SummaryCardComponent
     this.scrolling = false;
     this.triggerRefreshCardList = false;
     this.loading = res.loading;
+    this.checkDataLengthForScrolling();
   }
 
   /**
@@ -718,6 +729,7 @@ export class SummaryCardComponent
 
     this.scrolling = false;
     this.loading = false;
+    this.checkDataLengthForScrolling();
   }
 
   /**
@@ -963,16 +975,34 @@ export class SummaryCardComponent
     });
   }
 
+  /**
+   * Load more items on init to enable scrolling behavior
+   */
+  private checkDataLengthForScrolling() {
+    if (this.settings.widgetDisplay?.usePagination) return;
+    if (this.timeoutListener) {
+      clearTimeout(this.timeoutListener);
+    }
+    this.timeoutListener = setTimeout(() => {
+      const element = this.summaryCardGrid.nativeElement;
+      if (element.scrollHeight === element.clientHeight) {
+        this.loadOnScroll(null, true);
+      }
+    }, 0); // timeout to get the new container size
+  }
+
   /**
    * Load more items on scroll.
    *
    * @param e scroll event
+   * @param initLoad used on init to enable scrolling behavior
    */
-  private loadOnScroll(e: any): void {
+  private loadOnScroll(e: any, initLoad: boolean = false): void {
     /** If scroll is reaching bottom of scrolling height, trigger card load */
     const isScrollNearBottom =
-      e.target.scrollHeight - (e.target.clientHeight + e.target.scrollTop) < 50;
-    if (isScrollNearBottom) {
+      e?.target.scrollHeight - (e?.target.clientHeight + e?.target.scrollTop) <
+      50;
+    if (isScrollNearBottom || initLoad) {
       if (!this.scrolling && this.pageInfo.length > this.cards.length) {
         this.cards.length;
         this.scrolling = true;
@@ -982,6 +1012,7 @@ export class SummaryCardComponent
             const end = start + this.pageInfo.pageSize;
             this.cards.push(...this.sortedCachedCards.slice(start, end));
             this.scrolling = false;
+            this.checkDataLengthForScrolling();
           } else {
             this.onPage({
               pageSize: this.pageInfo.pageSize,
@@ -1000,7 +1031,7 @@ export class SummaryCardComponent
             })
           )
             .pipe(takeUntil(merge(this.cancelRefresh$, this.destroy$)))
-            .subscribe(() => this.updateRecordCards.bind(this));
+            .subscribe((res) => this.updateRecordCards.bind(this)(res));
         }
       }
     }