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>