From 9b87e336a39f58f52d53261875e4e9e6ad68c40e Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Fri, 14 Nov 2025 00:15:00 +0100
Subject: [PATCH] Add loading spinner to theater overlay

Introduces a loading spinner in the theater overlay component while data is being loaded. The loading service is now public to allow template access.
---
 src/app/theater-overlay/theater-overlay.component.html | 10 ++++++++++
 src/app/theater-overlay/theater-overlay.component.ts   |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/theater-overlay/theater-overlay.component.html b/src/app/theater-overlay/theater-overlay.component.html
index ef160bd..34d1e55 100644
--- a/src/app/theater-overlay/theater-overlay.component.html
+++ b/src/app/theater-overlay/theater-overlay.component.html
@@ -5,7 +5,17 @@
   <div class="w-7/10 p-10 h-188">
     <!-- <div class="bg-linear-to-b from-indigo-300 to-pink-300 h-full rounded-lg"> -->
     <div>
+      @if (loading.loading$ | async){
+        <div class="w-full h-full flex items-center justify-center mt-70">
+          <mat-progress-spinner
+            mode="indeterminate"
+            diameter="50"
+          ></mat-progress-spinner>
+        </div>
+      }
+      @else {
         <app-theater-layout [seatsPerRow]="seatsPerRow"></app-theater-layout>
+      }
     </div>
   </div>
 
diff --git a/src/app/theater-overlay/theater-overlay.component.ts b/src/app/theater-overlay/theater-overlay.component.ts
index 362f1ed..1fd7c20 100644
--- a/src/app/theater-overlay/theater-overlay.component.ts
+++ b/src/app/theater-overlay/theater-overlay.component.ts
@@ -15,7 +15,7 @@ import {SelectedSeatsService} from '../selected-seats.service';
 })
 export class TheaterOverlayComponent implements OnInit {
   private http = inject(HttpService);
-  private loading = inject(LoadingService)
+  loading = inject(LoadingService)
 
   showId!: number;
   seatsPerRow: { seat: Sitzplatz, state: TheaterSeatState }[][] = []