only show timeout overlay if it's image are fully loaded

ValoSpectra · Jan 20, 2025 · 4ac1f8c · 4ac1f8c
1 parent 9de5f94
commit 4ac1f8c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/app/timeout/timeout.component.html b/src/app/timeout/timeout.component.html
@@ -1,4 +1,4 @@
-<div class="wrapper" *ngIf="completed === false" [@fade]>
+<div class="wrapper" *ngIf="ready == true && completed === false" [@fade]>
   <div class="timeout-box" [style.background-image]="setTournamentBackgroundImage()">
     <div class="timeout-box-content">
       <div class="info-box">

diff --git a/src/app/timeout/timeout.component.ts b/src/app/timeout/timeout.component.ts
@@ -22,6 +22,7 @@ export class TimeoutComponent implements OnInit, AfterViewInit {
   groupCode = "UNKNOWN";
   socketService!: SocketService;
   match: any;
+  ready: boolean = false;
   timeout: any;
   team!: string;
   tournamentBackgroundUrl!: string;
@@ -88,8 +89,9 @@ export class TimeoutComponent implements OnInit, AfterViewInit {
     this.timeLeft = this.match.tools.timeout?.time ?? 60;
     this.socketService.subscribe((data: any) => {
       this.updateTimeout(data);
+      this.ready = true;
+      this.startTimer();
     });
-    this.startTimer();
   }
   public updateTimeout(data: any) {
     delete data.eventNumber;