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

@@ -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>
 

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 }[][] = []