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