From cf2eae175200b3c22f9ec609d7df10b76b52b43b Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 6 Sep 2024 20:38:01 +0200
Subject: [PATCH] Fix: Prevent premature rendering while movies load

---
 .../src/app/components/home/browse/browse.component.html  | 5 +++--
 .../src/app/components/home/browse/browse.component.ts    | 8 +++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 56d9c1b..4e3ce09 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -1,5 +1,6 @@
 <section>
-  @if (movies.length > 0) {
+  <div *ngIf="isLoading"></div>
+  @if (!isLoading && movies.length > 0) {
   <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
   <app-header
@@ -95,7 +96,7 @@
     </div>
     <app-video-player [playMovie]="playMovie"></app-video-player>
   </div>
-  } } @else {
+  } } @if (!isLoading && movies.length === 0) {
   <!-- If the database is empty -->
   <app-header [browse]="true"></app-header>
   <div class="error">
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index e6a7714..457aa93 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -30,6 +30,7 @@ export class BrowseComponent implements OnInit {
   favoriteMovies: number[] = [];
   currentMovie: any[] = [];
   playMovie: string = '';
+  isLoading: boolean = true;
   isWideScreen: boolean = false;
   uploadMovieOverview: boolean = false;
   currentResolution: '360p' | '720p' | '1080p' = '720p';
@@ -104,7 +105,12 @@ export class BrowseComponent implements OnInit {
   }
 
   async loadAllMovies() {
-    this.movies = await this.movieService.getAllMovies();
+    this.isLoading = true;
+    try {
+      this.movies = await this.movieService.getAllMovies();
+    } finally {
+      this.isLoading = false;
+    }
   }
 
   closeVideo(): void {