Adjusting if there is no data in location page + adding spinner

frontend/src/app/home/pages/location/location.component.html

@@ -4,11 +4,20 @@
 <main class="flex items-center justify-center bg-gray-100" *ngIf="!loading">
   <div class="w-full lg:flex container">
     <div class="py-6 px-4">
-      <ng-container *ngFor="let locationItem of locations; let i = index">
-        <app-location-card [location]="locationItem" [index]="i" [isSelected]="isLocationSelected(i)"
-          (locationSelected)="openInfoWindowFromCard(i)" (click)="scrollToMap()">
-        </app-location-card>
-      </ng-container>
+      <div *ngIf="locations.length > 0; else noData">
+        <ng-container *ngFor="let locationItem of locations; let i = index">
+          <app-location-card [location]="locationItem" [index]="i" [isSelected]="isLocationSelected(i)"
+            (locationSelected)="openInfoWindowFromCard(i)" (click)="scrollToMap()">
+          </app-location-card>
+        </ng-container>
+      </div>
+      <ng-template #noData>
+        <div class="w-full md:w-96">
+          <p class="bg-zinc-50 text-gray-700 p-4 rounded-lg text-center font-semibold">
+            Nema podataka.
+          </p>
+        </div>
+      </ng-template>
     </div>
     <div class="w-full py-6" #googleMapContainer>
       <google-map height="100vh" width="100%" [zoom]="zoom" [center]="center" [options]="options">

frontend/src/app/home/pages/location/location.component.ts

@@ -65,7 +65,7 @@ export class LocationComponent implements OnInit {
         this.locations = locations;
         this.loadMarkers();
       },
-      error: err => console.error('Observable emitted an error: ' + err),
+      error: err => this.loading = false,
       complete: () => this.loading = false
     });
   }

frontend/src/environments/environment.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: false,
-    apiUrl: 'http://localhost:5500/api'
+    apiUrl: 'http://localhost:4000/api'
 };