diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1b17681..4527683 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -1,4 +1,7 @@
-<div class="discover__layout">
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading" class="discover__layout">
   <app-navbar  (search_change)="handlePatternSearch($event)"></app-navbar>
     <div class="discover__content">
       <app-map [form]="form"></app-map>

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1b17681..4527683 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -1,4 +1,7 @@
-<div class="discover__layout">
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading" class="discover__layout">
   <app-navbar  (search_change)="handlePatternSearch($event)"></app-navbar>
     <div class="discover__content">
       <app-map [form]="form"></app-map>
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts
index 6a62cad..a9af473 100644
--- a/src/app/modules/public/discover/discover.component.ts
+++ b/src/app/modules/public/discover/discover.component.ts
@@ -14,6 +14,8 @@
 
   @ViewChild('modalSiteComponent') modal: any;
 
+  loading: boolean = true;
+
   openModal = false;
   icon_border_all = faBorderAll;
   allyId: number = -1;
@@ -49,6 +51,8 @@
         if(data.search){
           this.form.search = data.search;
         }
+        this.loading = false;
+        console.log(this.loading)
       }
     )
   }

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1b17681..4527683 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -1,4 +1,7 @@
-<div class="discover__layout">
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading" class="discover__layout">
   <app-navbar  (search_change)="handlePatternSearch($event)"></app-navbar>
     <div class="discover__content">
       <app-map [form]="form"></app-map>
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts
index 6a62cad..a9af473 100644
--- a/src/app/modules/public/discover/discover.component.ts
+++ b/src/app/modules/public/discover/discover.component.ts
@@ -14,6 +14,8 @@
 
   @ViewChild('modalSiteComponent') modal: any;
 
+  loading: boolean = true;
+
   openModal = false;
   icon_border_all = faBorderAll;
   allyId: number = -1;
@@ -49,6 +51,8 @@
         if(data.search){
           this.form.search = data.search;
         }
+        this.loading = false;
+        console.log(this.loading)
       }
     )
   }
diff --git a/src/app/shared/components/loading/loading.component.html b/src/app/shared/components/loading/loading.component.html
new file mode 100644
index 0000000..47268d9
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.html
@@ -0,0 +1,3 @@
+<div>
+  <p>Loading...</p>
+</div>

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1b17681..4527683 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -1,4 +1,7 @@
-<div class="discover__layout">
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading" class="discover__layout">
   <app-navbar  (search_change)="handlePatternSearch($event)"></app-navbar>
     <div class="discover__content">
       <app-map [form]="form"></app-map>
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts
index 6a62cad..a9af473 100644
--- a/src/app/modules/public/discover/discover.component.ts
+++ b/src/app/modules/public/discover/discover.component.ts
@@ -14,6 +14,8 @@
 
   @ViewChild('modalSiteComponent') modal: any;
 
+  loading: boolean = true;
+
   openModal = false;
   icon_border_all = faBorderAll;
   allyId: number = -1;
@@ -49,6 +51,8 @@
         if(data.search){
           this.form.search = data.search;
         }
+        this.loading = false;
+        console.log(this.loading)
       }
     )
   }
diff --git a/src/app/shared/components/loading/loading.component.html b/src/app/shared/components/loading/loading.component.html
new file mode 100644
index 0000000..47268d9
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.html
@@ -0,0 +1,3 @@
+<div>
+  <p>Loading...</p>
+</div>
diff --git a/src/app/shared/components/loading/loading.component.scss b/src/app/shared/components/loading/loading.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.scss

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1b17681..4527683 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -1,4 +1,7 @@
-<div class="discover__layout">
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading" class="discover__layout">
   <app-navbar  (search_change)="handlePatternSearch($event)"></app-navbar>
     <div class="discover__content">
       <app-map [form]="form"></app-map>
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts
index 6a62cad..a9af473 100644
--- a/src/app/modules/public/discover/discover.component.ts
+++ b/src/app/modules/public/discover/discover.component.ts
@@ -14,6 +14,8 @@
 
   @ViewChild('modalSiteComponent') modal: any;
 
+  loading: boolean = true;
+
   openModal = false;
   icon_border_all = faBorderAll;
   allyId: number = -1;
@@ -49,6 +51,8 @@
         if(data.search){
           this.form.search = data.search;
         }
+        this.loading = false;
+        console.log(this.loading)
       }
     )
   }
diff --git a/src/app/shared/components/loading/loading.component.html b/src/app/shared/components/loading/loading.component.html
new file mode 100644
index 0000000..47268d9
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.html
@@ -0,0 +1,3 @@
+<div>
+  <p>Loading...</p>
+</div>
diff --git a/src/app/shared/components/loading/loading.component.scss b/src/app/shared/components/loading/loading.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.scss
diff --git a/src/app/shared/components/loading/loading.component.ts b/src/app/shared/components/loading/loading.component.ts
new file mode 100644
index 0000000..0268494
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+})
+export class LoadingComponent implements OnInit {
+
+  constructor() {}
+  ngOnInit(): void {}
+
+}

diff --git a/src/app/modules/public/discover/components/map/map.component.html b/src/app/modules/public/discover/components/map/map.component.html
index 5dbe2b2..b935d53 100644
--- a/src/app/modules/public/discover/components/map/map.component.html
+++ b/src/app/modules/public/discover/components/map/map.component.html
@@ -1,4 +1,7 @@
-<div>
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading">
   <google-map
     #mapa
     id="map"
diff --git a/src/app/modules/public/discover/components/map/map.component.ts b/src/app/modules/public/discover/components/map/map.component.ts
index d46605e..e906462 100644
--- a/src/app/modules/public/discover/components/map/map.component.ts
+++ b/src/app/modules/public/discover/components/map/map.component.ts
@@ -13,6 +13,7 @@
 })
 export class MapComponent implements OnInit, AfterViewInit {
 
+  loading = true;
   @ViewChild('mapa', { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;
 
@@ -84,6 +85,7 @@
       lng: this.form.lng
     };
     this.createMarkers();
+    this.loading = false;
   }
 
   ngAfterViewInit() {
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1b17681..4527683 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -1,4 +1,7 @@
-<div class="discover__layout">
+<div *ngIf="loading">
+  <app-loading></app-loading>
+</div>
+<div *ngIf="!loading" class="discover__layout">
   <app-navbar  (search_change)="handlePatternSearch($event)"></app-navbar>
     <div class="discover__content">
       <app-map [form]="form"></app-map>
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts
index 6a62cad..a9af473 100644
--- a/src/app/modules/public/discover/discover.component.ts
+++ b/src/app/modules/public/discover/discover.component.ts
@@ -14,6 +14,8 @@
 
   @ViewChild('modalSiteComponent') modal: any;
 
+  loading: boolean = true;
+
   openModal = false;
   icon_border_all = faBorderAll;
   allyId: number = -1;
@@ -49,6 +51,8 @@
         if(data.search){
           this.form.search = data.search;
         }
+        this.loading = false;
+        console.log(this.loading)
       }
     )
   }
diff --git a/src/app/shared/components/loading/loading.component.html b/src/app/shared/components/loading/loading.component.html
new file mode 100644
index 0000000..47268d9
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.html
@@ -0,0 +1,3 @@
+<div>
+  <p>Loading...</p>
+</div>
diff --git a/src/app/shared/components/loading/loading.component.scss b/src/app/shared/components/loading/loading.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.scss
diff --git a/src/app/shared/components/loading/loading.component.ts b/src/app/shared/components/loading/loading.component.ts
new file mode 100644
index 0000000..0268494
--- /dev/null
+++ b/src/app/shared/components/loading/loading.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+})
+export class LoadingComponent implements OnInit {
+
+  constructor() {}
+  ngOnInit(): void {}
+
+}
diff --git a/src/assets/images/loading/loading.svg b/src/assets/images/loading/loading.svg
new file mode 100644
index 0000000..975a2f5
--- /dev/null
+++ b/src/assets/images/loading/loading.svg
@@ -0,0 +1 @@
+<svg id="eUZcybrm0DS1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><ellipse id="eUZcybrm0DS2" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 112.180851 88.755319)" fill="rgb(140,140,140)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS3" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 112.180851 134.437362)" fill="rgb(211,219,236)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS4" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 163.01025 134.799064)" fill="rgb(211,219,236)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS5" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 163.010263 182.843971)" fill="rgb(210,219,237)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS6" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 214.550313 134.799064)" fill="rgb(211,219,236)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS7" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 214.550313 88.755319)" fill="rgb(210,219,237)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS8" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 214.550313 182.843971)" fill="rgb(210,219,237)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS9" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 112.180864 182.482269)" fill="rgb(210,219,237)" stroke="none" stroke-width="0"/><ellipse id="eUZcybrm0DS10" rx="17.5" ry="17.5" transform="matrix(1 0 0 1 163.01025 89.117021)" fill="rgb(211,219,236)" stroke="none" stroke-width="0"/></svg>
\ No newline at end of file