Add error handling and snackbar notifications

Introduces error state management in LoadingService, displays error bar and snackbar notifications in the UI, and updates ScheduleComponent to use the new error handling. Also adds custom theming for error snackbar and progress bar.

src/app/header-2/header-2.component.html

@@ -24,7 +24,9 @@
     </div>
   </div>
 
-  @if (loading$ | async) {
+  @if (loadingService.error$ | async) {
+    <div class="h-1 w-full" style="background-color: red;"></div>
+  } @else if (loadingService.loading$ | async){
     <mat-progress-bar
       mode="indeterminate"
       class="h-1 w-full"

src/app/header-2/header-2.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { LoadingService } from '../loading.service';
 
 @Component({
@@ -8,8 +8,5 @@ import { LoadingService } from '../loading.service';
   styleUrl: './header-2.component.css'
 })
 export class Header2Component {
-  loading$;
-  constructor(private loadingService: LoadingService) {
-    this.loading$ = this.loadingService.loading$;
-  }
+  protected loadingService = inject(LoadingService)
 }