From 95c02446f8e0ef8af7f91f3aee8d63295d5f6dc2 Mon Sep 17 00:00:00 2001
From: ftoromanoff <francois.toromanoff@ign.fr>
Date: Wed, 18 Oct 2023 16:04:04 +0200
Subject: [PATCH] addEvent 'loaded' when icon is fully loaded

---
 src/Core/Label.js | 8 ++++++--
 src/Core/Style.js | 9 +++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/Core/Label.js b/src/Core/Label.js
index 1dfa5b6ab0..43206c844c 100644
--- a/src/Core/Label.js
+++ b/src/Core/Label.js
@@ -100,8 +100,12 @@ class Label extends THREE.Object3D {
                     this.content.classList.add('itowns-stroke-single');
                 }
                 style.applyToHTML(this.content)
-                    .then(() => {
-                        this.icon = this.content.getElementsByClassName('itowns-icon')[0];
+                    .then((icon) => {
+                        if (icon) {
+                            icon.addEventListener('loaded', ()  => {
+                                this.icon = this.content.getElementsByClassName('itowns-icon')[0];
+                            }, { once: true });
+                        }
                     });
             }
         } else {
diff --git a/src/Core/Style.js b/src/Core/Style.js
index 8fa0cbbc6d..08d73dcabc 100644
--- a/src/Core/Style.js
+++ b/src/Core/Style.js
@@ -639,6 +639,7 @@ class Style {
      * set Style from (geojson-like) properties.
      * @param {object} properties (geojson-like) properties.
      * @param {number} type
+     *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
     setFromGeojsonProperties(properties, type) {
@@ -680,6 +681,7 @@ class Style {
      * @param {Object} sprites vector tile layer.
      * @param {number} [order=0]
      * @param {boolean} [symbolToCircle=false]
+     *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
     setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
@@ -851,6 +853,8 @@ class Style {
      * properties of this style.
      *
      * @param {Element} domElement - The element to set the style to.
+     *
+     * @returns {HTMLImageElement} - The icon
      */
     async applyToHTML(domElement) {
         if (arguments.length > 1) {
@@ -942,13 +946,14 @@ class Style {
 
             cIcon.style['z-index'] = -1;
             domElement.appendChild(cIcon);
-            icon.removeEventListener('load', addIcon);
+            const event = new Event('loaded');
+            icon.dispatchEvent(event);
         };
 
         if (icon.complete) {
             addIcon();
         } else {
-            icon.addEventListener('load', addIcon);
+            icon.addEventListener('load', addIcon, { once: true });
         }
         return icon;
     }