feat: added loading indicator to the screen

src/app/map/map.page.html

@@ -5,6 +5,8 @@
   <app-search [class.mobile]="utilService.isMobile()" (setLocation)="zoomToLocation($event)"></app-search>
 </ion-content>
 
+<ion-progress-bar type="indeterminate"  *ngIf="vineyardService.getIsVineyardsLoading() | async"></ion-progress-bar>
+
 <div id="legend">
   <div class="legend-item">
     <div class="color" [style.background-color]="getFeatureColors(true)[0]" [style.border-color]="getFeatureColors(true)[1]"></div>

src/app/map/map.page.scss

@@ -126,4 +126,8 @@ ion-fab-button {
     }
 
   }
-}
+}
+
+ion-progress-bar {
+  height: 5px;
+}

src/app/services/vineyard.service.ts

@@ -27,6 +27,8 @@ export class VineyardService {
 
   private _activeSeasons$: BehaviorSubject<number[]>;
 
+  private _vineyardsLoading$: BehaviorSubject<boolean>;
+
   private _vineyardCollection: AngularFirestoreCollection<VineyardDoc>;
 
   private _sharedVineyardCollection: AngularFirestoreCollection<SharedVineyardDoc>;
@@ -37,6 +39,7 @@ export class VineyardService {
     this._vineyards$ = new BehaviorSubject<Vineyard[]>([]);
     this._activeVineyard$ = new BehaviorSubject<Vineyard>(null);
     this._activeSeasons$ = new BehaviorSubject<number[]>([new Date().getFullYear()]);
+    this._vineyardsLoading$ = new BehaviorSubject<boolean>(false);
 
     this.authService.getUser().subscribe((user: User) => {
       if (user) {
@@ -53,6 +56,10 @@ export class VineyardService {
     });
   }
 
+  getIsVineyardsLoading(): Observable<boolean> {
+    return this._vineyardsLoading$;
+  }
+
   getVineyardsListener(): Observable<Vineyard[]> {
     return this._vineyards$;
   }
@@ -70,6 +77,7 @@ export class VineyardService {
   }
 
   getVineyards(): void {
+    this._vineyardsLoading$.next(true);
     combineLatest(this.getUserVineyards(), this.getSharedVineyards())
       .pipe(
         map(([owned, shared]) => [...owned, ...shared]),
@@ -89,9 +97,11 @@ export class VineyardService {
       .subscribe({
         next: (vineyards: Vineyard[]) => {
           this._vineyards$.next(vineyards);
+          this._vineyardsLoading$.next(false);
         },
         error: (error: any) => {
           console.error(`Something went wrong while fetching vineyards for user ${this._userId}`, error);
+          this._vineyardsLoading$.next(false);
         },
       });
   }