FAUST: throttle loading scoreboard rows for performance

nename0 · Aug 31, 2023 · a081cf5 · a081cf5
1 parent d997c33
commit a081cf5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/scoreboard/src/app/scoretable/scoretable.component.html b/scoreboard/src/app/scoretable/scoretable.component.html
@@ -20,8 +20,8 @@ <h4>
 	</tr>
 	</thead>
 	<tbody>
-	<ng-container *ngFor="let rank of info.scoreboard; trackBy: teamTrackBy">
-		<tr *ngIf="backend.teams[rank.team_id]">
+	<ng-container *ngFor="let rank of info.scoreboard; let i = index; trackBy: teamTrackBy">
+		<tr *ngIf="backend.teams[rank.team_id] && i < dummyRowStart">
 			<!-- Team row -->
 			<td class="rankcell"><h4>{{rank.rank}}</h4></td>
 			<td class="teamcell">
@@ -50,6 +50,7 @@ <h4 class="team-name" [class.blocked]="backend.bannedTeams[rank.team_id]">
 
 			<tablelinecells [rank]="rank" [tick]="info.tick"></tablelinecells>
 		</tr>
+		<tr class="dummyrow" *ngIf="!backend.teams[rank.team_id] || i >= dummyRowStart"></tr>
 	</ng-container>
 	</tbody>
 </table>
diff --git a/scoreboard/src/app/scoretable/scoretable.component.less b/scoreboard/src/app/scoretable/scoretable.component.less
@@ -10,6 +10,10 @@ table {
 	}
 }
 
+tr.dummyrow {
+	height: 85px; // usual row height
+}
+
 .headercell {
 	.fa-spin {
 		margin-left: 10px;

diff --git a/scoreboard/src/app/scoretable/scoretable.component.ts b/scoreboard/src/app/scoretable/scoretable.component.ts
@@ -13,6 +13,11 @@ export class ScoretableComponent implements OnInit, OnDestroy {
 
 	public info: RoundInformation = {tick: -1, services: [], scoreboard: []};
 
+	// Initially on first load do not populate all +150 row as this creates noticeable load times.
+	// Instead "enable" them later using requestAnimationFrame() at a speed that is acceptable for the end user.
+	// Only really noticeable if you use the scrollbar and jump to the far end immediately after load.
+	public dummyRowStart = 20;
+
 	public shownTick: number = -1;
 	private shownTickIsRecent: boolean = true;
 	private newestScoreboardTickSubscription: Subscription;
@@ -45,7 +50,20 @@ export class ScoretableComponent implements OnInit, OnDestroy {
 		console.log('New tick: ', num);
 		this.shownTick = num;
 		this.shownTickIsRecent = num == this.backend.currentState.scoreboard_tick;
-		this.rankingSubscription = this.backend.getRanking(num).subscribe(rank => this.info = rank);
+		this.rankingSubscription = this.backend.getRanking(num).subscribe(rank => {
+			this.info = rank;
+			this.checkDummyRowIndex();
+		});
+	}
+
+	checkDummyRowIndex = () => {
+		if (this.info && this.info.scoreboard.length) {
+			if (this.info.scoreboard.length <= this.dummyRowStart) {
+				return;
+			}
+			this.dummyRowStart += 4;
+		}
+		requestAnimationFrame(this.checkDummyRowIndex);
 	}
 
 	teamTrackBy(index, item: Rank) {