working 3 tier approach

src/app/schedule/schedule.component.html

@@ -9,24 +9,30 @@
       </p>
     </div>
 
-    <div class="schedule-list">
-      <div class="schedule-day-label">Monday – Friday</div>
-      <div class="schedule-table">
-        <div *ngFor="let program of programs" class="schedule-row">
-          <div class="schedule-time">{{ program.time }}</div>
-          <div class="schedule-divider"></div>
-          <div class="schedule-details">
-            <h4 class="schedule-title">{{ program.title }}</h4>
-            <div class="schedule-meta">
-              <span class="schedule-host">
-                <span aria-hidden="true">🎙️</span> {{ program.host }}
-              </span>
-              <span class="schedule-genre">{{ program.genre }}</span>
+    @if (loading) {
+      <div class="schedule-loading">Loading schedule&hellip;</div>
+    } @else if (programs.length === 0) {
+      <div class="schedule-empty">No programs scheduled. Check back soon!</div>
+    } @else {
+      <div class="schedule-list">
+        <div class="schedule-day-label">Monday – Friday</div>
+        <div class="schedule-table">
+          <div *ngFor="let program of programs" class="schedule-row">
+            <div class="schedule-time">{{ program.time }}</div>
+            <div class="schedule-divider"></div>
+            <div class="schedule-details">
+              <h4 class="schedule-title">{{ program.title }}</h4>
+              <div class="schedule-meta">
+                <span class="schedule-host">
+                  <span aria-hidden="true">&#x1F399;</span> {{ program.host }}
+                </span>
+                <span class="schedule-genre">{{ program.genre }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    }
 
     <div class="schedule-weekend">
       <div class="weekend-heading">