perf: Add virtual scrolling

Attempting to improve table performance by only render visible dom elements.

src-angular/app/components/browse/result-table/result-table.component.ts

@@ -1,12 +1,13 @@
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'
+import { Component, EventEmitter, HostBinding, HostListener, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 
+import { Subscription } from 'rxjs'
 import { SettingsService } from 'src-angular/app/core/services/settings.service'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
-import { ResultTableRowComponent } from './result-table-row/result-table-row.component'
 
 @Component({
 	selector: 'app-result-table',
@@ -18,12 +19,14 @@ export class ResultTableComponent implements OnInit {
 
 	@Output() rowClicked = new EventEmitter<ChartData[]>()
 
-	@ViewChild('resultTableDiv', { static: true }) resultTableDiv: ElementRef
-	@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
+	@ViewChild('viewport', { static: true }) viewport: CdkVirtualScrollViewport
 
 	activeSong: ChartData[] | null = null
 	sortDirection: 'asc' | 'desc' = 'asc'
 	sortColumn: 'name' | 'artist' | 'album' | 'genre' | 'year' | 'charter' | 'length' | 'modifiedTime' | null = null
+	isLoadingMore = false
+	songs: ChartData[][] = []
+	subscription: Subscription[] = []
 
 	constructor(
 		public searchService: SearchService,
@@ -33,18 +36,48 @@ export class ResultTableComponent implements OnInit {
 	) { }
 
 	ngOnInit() {
-		this.searchService.newSearch.subscribe(() => {
-			this.resultTableDiv.nativeElement.scrollTop = 0
-			this.activeSong = null
-			setTimeout(() => this.tableScrolled(), 0)
-		})
-		this.searchService.updateSearch.subscribe(() => {
-			setTimeout(() => this.tableScrolled(), 0)
-		})
+		this.subscription.push(
+			this.searchService.newSearch.subscribe(() => {
+				if (this.viewport) {
+					this.viewport.scrollToIndex(0)
+				}
+				this.activeSong = null
+				this.isLoadingMore = false
+				this.songs = [...this.searchService.groupedSongs]
+			})
+		)
+
+		this.subscription.push(
+			this.searchService.updateSearch.subscribe(() => {
+				this.isLoadingMore = false
+				this.songs = [...this.searchService.groupedSongs]
+			})
+		)
 	}
 
-	get songs() {
-		return this.searchService.groupedSongs
+	onViewportScroll(): void {
+		if (!this.viewport || this.router.url !== '/browse' || this.isLoadingMore) {
+			return
+		}
+
+		const viewportElement = this.viewport.elementRef.nativeElement
+		const scrollTop = viewportElement.scrollTop
+		const scrollHeight = viewportElement.scrollHeight
+		const clientHeight = viewportElement.clientHeight
+		const threshold = 100
+
+		if (scrollHeight - (scrollTop + clientHeight) < threshold) {
+			this.isLoadingMore = true
+			this.searchService.getNextSearchPage()
+		}
+	}
+
+	trackByFn(_: number, song: ChartData[]): number {
+		return song[0].groupId
+	}
+
+	get tableRowHeight(): number {
+		return this.settingsService.isCompactTable ? 32 : 48
 	}
 
 	hasColumn(column: string) {
@@ -88,13 +121,8 @@ export class ResultTableComponent implements OnInit {
 
 	@HostListener('window:resize', ['$event'])
 	onResize() {
-		this.tableScrolled()
-	}
-	tableScrolled(): void {
-		const table = this.resultTableDiv.nativeElement
-		if (this.router.url === '/browse' && table.scrollHeight - (table.scrollTop + table.clientHeight) < 100) {
-			// Scrolled near the bottom of the table
-			this.searchService.getNextSearchPage()
+		if (this.viewport) {
+			this.viewport.checkViewportSize()
 		}
 	}
 }