⚡️ Improve pins perf and modal background

src/app/components/add-pin-popup/add-pin-popup.component.ts

@@ -15,7 +15,7 @@ import {
 } from 'rxjs/operators';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
 import { ExifService } from '../../services/exif/exif.service';
-import { MapReloadService } from '../../services/map-reload/map-reload.service'; // Assurez-vous d'importer le service de rechargement de la carte
+import { MapReloadService } from '../../services/map-reload/map-reload.service';
 import { PinService } from '../../services/pin/pin.service';
 import { DragDropComponent } from '../drag-drop/drag-drop.component';
 @Component({

src/app/components/confirm-modal/confirm-modal.component.html

@@ -6,6 +6,7 @@
     'opacity-100': isOpen
   }"
   (click)="cancel()"
+  id="confirm-modal-background"
 ></div>
 
 <!-- Contenu principal -->

src/app/components/confirm-modal/confirm-modal.component.ts

@@ -67,5 +67,9 @@ export class ConfirmModalComponent implements OnInit, OnDestroy {
     if (modal && modal.parentElement !== document.body) {
       document.body.appendChild(modal);
     }
+    const bg = document.getElementById('confirm-modal-background');
+    if (bg && bg.parentElement !== document.body) {
+      document.body.appendChild(bg);
+    }
   }
 }

src/app/components/edit-pin-popup/edit-pin-popup.component.html

@@ -31,6 +31,7 @@
     'opacity-100': isPinModalOpen
   }"
   (click)="closePinModal()"
+  id="pin-modal-background"
 ></div>
 
 <!-- Main modal -->

src/app/components/edit-pin-popup/edit-pin-popup.component.ts

@@ -25,7 +25,7 @@ import {
 import { Pin } from '../../model/Pin';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
 import { ExifService } from '../../services/exif/exif.service';
-import { MapReloadService } from '../../services/map-reload/map-reload.service'; // Assurez-vous d'importer le service de rechargement de la carte
+import { MapReloadService } from '../../services/map-reload/map-reload.service';
 import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
 import { DragDropComponent } from '../drag-drop/drag-drop.component';
@@ -58,7 +58,7 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
     private exifService: ExifService,
     private modalService: ModalService,
     private router: Router,
-    private mapReloadService: MapReloadService // Assurez-vous d'importer le service de rechargement de la carte
+    private mapReloadService: MapReloadService
   ) {
     // Initialiser le formulaire avec des valeurs par défaut
     this.form = this.fb.group({
@@ -192,6 +192,10 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
     if (modal && modal.parentElement !== document.body) {
       document.body.appendChild(modal);
     }
+    const bg = document.getElementById('pin-modal-background');
+    if (bg && bg.parentElement !== document.body) {
+      document.body.appendChild(bg);
+    }
   }
 
   selectSuggestion(suggestion: any): void {

src/app/components/leaflet-map/leaflet-map.component.ts

@@ -6,7 +6,7 @@ import * as L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { Pin } from '../../model/Pin';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
-import { MapReloadService } from '../../services/map-reload/map-reload.service'; // Assurez-vous d'importer le service de rechargement de la carte
+import { MapReloadService } from '../../services/map-reload/map-reload.service';
 import { PinService } from '../../services/pin/pin.service';
 import { PinMarkerComponent } from '../pin-marker/pin-marker.component';
 
@@ -33,7 +33,7 @@ export class LeafletMapComponent implements OnInit {
     private autocompleteService: AutocompleteService,
     private route: ActivatedRoute,
     private router: Router,
-    private mapReloadService: MapReloadService // Assurez-vous d'importer le service de rechargement de la carte
+    private mapReloadService: MapReloadService
   ) {}
 
   ngOnInit(): void {
@@ -74,34 +74,38 @@ export class LeafletMapComponent implements OnInit {
       this.allPins = pins;
       this.extractPersons(pins);
 
-      const countrySet = new Set<string>();
-      const requests = pins.map((pin) =>
-        this.autocompleteService
-          .getAddressFromCoordinates(pin.location[0], pin.location[1])
-          .toPromise()
-          .then((res: any) => {
-            const address = res?.address;
-            const country =
-              address?.country ||
-              this.extractLastFromDisplayName(res?.display_name);
-            if (country) {
-              this.pinCountries[pin.id] = country;
-              countrySet.add(country);
-            }
-          })
-          .catch((err: any) => {
-            console.error(
-              'Erreur lors de la récupération du pays pour le pin',
-              pin.id,
-              err
-            );
-          })
-      );
-
-      Promise.all(requests).then(() => {
-        this.availableCountries = Array.from(countrySet).sort();
-        this.renderPins();
-      });
+      this.renderPins(); // Afficher d'abord les pins sans les filtres
+      this.loadCountriesForFiltrers(pins); // Ensuite, charger les pays en arrière-plan
+    });
+  }
+
+  private loadCountriesForFiltrers(pins: Pin[]): void {
+    const countrySet = new Set<string>();
+    const requests = pins.map((pin) =>
+      this.autocompleteService
+        .getAddressFromCoordinates(pin.location[0], pin.location[1])
+        .toPromise()
+        .then((res: any) => {
+          const address = res?.address;
+          const country =
+            address?.country ||
+            this.extractLastFromDisplayName(res?.display_name);
+          if (country) {
+            this.pinCountries[pin.id] = country;
+            countrySet.add(country);
+          }
+        })
+        .catch((err: any) => {
+          console.error(
+            'Erreur lors de la récupération du pays pour le pin',
+            pin.id,
+            err
+          );
+        })
+    );
+
+    Promise.all(requests).then(() => {
+      this.availableCountries = Array.from(countrySet).sort();
     });
   }
 
@@ -221,35 +225,9 @@ export class LeafletMapComponent implements OnInit {
     this.pinsService.getPins().subscribe((pins: Pin[]) => {
       this.allPins = pins;
       this.extractPersons(pins);
+      this.renderPins(); // Afficher d'abord les pins sans les filtres
 
-      const countrySet = new Set<string>();
-      const requests = pins.map((pin) =>
-        this.autocompleteService
-          .getAddressFromCoordinates(pin.location[0], pin.location[1])
-          .toPromise()
-          .then((res: any) => {
-            const address = res?.address;
-            const country =
-              address?.country ||
-              this.extractLastFromDisplayName(res?.display_name);
-            if (country) {
-              this.pinCountries[pin.id] = country;
-              countrySet.add(country);
-            }
-          })
-          .catch((err: any) => {
-            console.error(
-              'Erreur lors de la récupération du pays pour le pin',
-              pin.id,
-              err
-            );
-          })
-      );
-
-      Promise.all(requests).then(() => {
-        this.availableCountries = Array.from(countrySet).sort();
-        this.renderPins();
-      });
+      this.loadCountriesForFiltrers(pins); // Ensuite, charger les pays en arrière-plan
     });
   }
 }