Have messages underneath mail viewer and on scroll down or on window …

…resize
runbox · Feb 13, 2025 · 88004ca · 88004ca
1 parent 8e76526
commit 88004ca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/app/accessible-table/accessible-table.component.html b/src/app/accessible-table/accessible-table.component.html
@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport [itemSize]="firstRowHeight" class="email-viewport">
+<cdk-virtual-scroll-viewport [maxBufferPx]="maxBufferPx" [minBufferPx]="maxBufferPx / 2" [itemSize]="firstRowHeight" class="email-viewport">
   <table
     tabindex="0" role="group" aria-label="Messages"
     class="mat-mdc-table mdc-data-table__table cdk-table mat-sort mat-elevation-z8"

diff --git a/src/app/accessible-table/accessible-table.component.ts b/src/app/accessible-table/accessible-table.component.ts
@@ -59,32 +59,40 @@ export class AccessibleTableComponent implements OnDestroy, AfterViewInit, OnCha
   @Input() scrollToIndex: null | number = null
 
   firstRowHeight: number = 100;
+  maxBufferPx: number;
 
   private renderedRangeSub!: Subscription;
+  private resizeObserver: ResizeObserver;
 
   constructor(
     private elementRef: ElementRef,
   ) { }
 
   ngAfterViewInit() {
     this.renderedRangeSub = this.viewport.renderedRangeStream
-      .pipe(debounceTime(500))
+      .pipe(debounceTime(50))
       .subscribe(range => {
         this.renderedRangeChange.emit(range)
       });
 
-      setTimeout(() => {
-        this.updateFirstRowHeight();
-      }, 1000)
+    setTimeout(() => {
+      this.updateFirstRowHeight()
+    }, 1000)
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.maxBufferPx = window.innerHeight
+      this.updateFirstRowHeight()
+    });
+
+    this.resizeObserver.observe(this.elementRef.nativeElement.parentElement.querySelector('table'));
   }
 
   ngOnDestroy(): void {
-    this.renderedRangeSub?.unsubscribe();
+    this.renderedRangeSub.unsubscribe();
+    this.resizeObserver.disconnect();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.updateFirstRowHeight()
-
     if (changes.scrollToIndex && this.items.length > this.scrollToIndex) {
       this.doScrollToIndex(this.scrollToIndex)
     }
@@ -99,11 +107,13 @@ export class AccessibleTableComponent implements OnDestroy, AfterViewInit, OnCha
   }
 
   private updateFirstRowHeight(): void {
-    this.firstRowHeight = this
+    const elem = this
       .elementRef
       .nativeElement
       .parentElement
         ?.querySelector('tbody')
+
+    this.firstRowHeight = elem
         ?.offsetHeight
         || this.firstRowHeight;
   }