⚡️ Use unique name for every modal + new event from parent to children to load content + load images when pin opened instead of when page loads

src/app/components/pin-marker/pin-marker.component.html

@@ -1,11 +1,13 @@
 <app-confirm-modal
   (confirmed)="handleConfirm()"
   (cancelled)="handleCancel()"
+  [pinId]="pin.id"
+  [pinOpened]="pinOpened"
 ></app-confirm-modal>
-<app-share-modal></app-share-modal>
+<app-share-modal [pinOpened]="pinOpened" [pinId]="pin.id"></app-share-modal>
 
 <div class="flex mb-2 justify-end items-center">
-  <app-edit-pin-popup [pin]="pin" [modalId]="pin.id"></app-edit-pin-popup>
+  <app-edit-pin-popup [pin]="pin" [pinId]="pin.id" [pinOpened]="pinOpened"></app-edit-pin-popup>
   <button
     class="p-1 text-gray-500 rounded hover:bg-gray-200 focus:outline-none ml-2 flex items-center"
     (click)="sharePin()"
@@ -86,7 +88,7 @@
       class="relative h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
     >
       <div
-        *ngFor="let imageUrl of imageUrls; let index = index"
+        *ngFor="let imageId of pin.files; let index = index"
         [class]="
           'absolute inset-0 transition-opacity duration-700 ease-in-out' +
           (index === currentIndex ? ' opacity-100' : ' opacity-0')
@@ -96,13 +98,12 @@
           class="relative h-40 overflow-hidden rounded-lg flex items-center justify-center"
         >
           <img
-            [src]="imageUrl"
-            (load)="onImageLoad()"
-            [hidden]="!imageLoaded"
+            [src]="imageUrls[index]"
+            [hidden]="!imagesLoaded"
             class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
           />
           <div
-            *ngIf="!imageLoaded"
+            *ngIf="!imagesLoaded"
             class="relative inset-0 bg-gray-200 w-52 h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
           >
             <span class="text-gray-500">Loading image...</span>

src/app/components/pin-marker/pin-marker.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import * as L from 'leaflet';
 import { Pin } from '../../model/Pin';
@@ -27,7 +27,9 @@ export class PinMarkerComponent {
 
   currentIndex: number = 0;
   imageUrls: SafeUrl[] = [];
-  imageLoaded = false;
+  imagesLoaded = false;
+
+  @Output() pinOpened = new EventEmitter<void>();
 
   constructor(
     private pinService: PinService,
@@ -37,7 +39,13 @@ export class PinMarkerComponent {
   ) { }
 
   ngOnInit() {
+    // Écouter l'événement d'ouverture du popup
+    this.marker.on('popupopen', () => {
+      if (!this.imagesLoaded) {
         this.loadImages();
+        this.pinOpened.emit();
+      }
+    });
   }
 
   loadImages() {
@@ -47,37 +55,33 @@ export class PinMarkerComponent {
         const safeUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
         this.imageUrls.push(safeUrl);
         if (this.imageUrls.length === this.pin.files.length) {
-          this.imageLoaded = true;
+          this.imagesLoaded = true;
         }
       });
     });
   }
 
   sharePin() {
-    this.modalService.openModal('share-modal', undefined, this.pin.id);
+    this.modalService.openModal('share-modal-' + this.pin.id);
   }
 
   onClosePopup() {
     this.marker.closePopup();
   }
 
-  onImageLoad() {
-    this.imageLoaded = true;
-  }
-
   onDelete() {
-    this.modalService.openModal('confirm-modal');
+    this.modalService.openModal('confirm-modal-' + this.pin.id);
   }
 
   handleConfirm() {
     this.pinService.deletePin(this.pin.id).subscribe(() => {
       this.marker.remove();
-      this.modalService.closeModal('confirm-modal');
+      this.modalService.closeModal('confirm-modal-' + this.pin.id);
     });
   }
 
   handleCancel() {
-    this.modalService.closeModal('confirm-modal');
+    this.modalService.closeModal('confirm-modal-' + this.pin.id);
   }
 
   get formattedDescription(): string {