@preference-sl/pref-viewer 2.14.0-beta.3 → 2.14.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.14.0-beta.3",
+    "version": "2.14.0-beta.5",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-controller.js

@@ -114,6 +114,7 @@ export default class BabylonJSController {
     #options = {};
 
     #gltfResolver = null; // GLTFResolver instance
+    #loadGeneration = 0; // incremented per #loadContainers call to discard stale deferred results
     #babylonJSAnimationController = null; // AnimationController instance
 
     #renderPipelines = {
@@ -2400,23 +2401,51 @@ export default class BabylonJSController {
 
     /**
      * Loads all asset containers (model, environment, materials, etc.) and adds them to the scene.
-     * @private
-     * @returns {Promise<{success: boolean, error: any}>} Resolves to an object indicating if loading succeeded and any error encountered.
-     * @description
-     * Waits for all containers to load in parallel, then replaces or adds them to the scene as needed.
-     * Applies material and camera options, sets wall/floor visibility, and initializes lights and shadows.
-     * Returns an object with success status and error details.
+     *
+     * Uses **two-phase progressive loading** when the environment container is pending:
+     *   Phase 1 – Load model + materials, apply them, and start the render loop so the user sees
+     *             the configured product immediately.
+     *   Phase 2 – The environment (scene with trees, walls, floor…) was already downloading in
+     *             parallel.  Once it resolves, briefly stop rendering, splice it in, reapply
+     *             camera/IBL/visibility options, and restart.
+     *
+     * When the environment is *not* pending (e.g. only the model changed), the original
+     * single-phase behaviour is preserved — all containers settle immediately and are applied
+     * together.
+     *
+     * A generation counter (`#loadGeneration`) guards Phase 2: if a newer `load()` call starts
+     * while the environment is still downloading, the stale result is disposed instead of applied.
+     *
+     * @private
+     * @param {boolean} [force=false] - Bypass cached size/timestamp checks.
+     * @returns {Promise<{success: boolean, error: any}>}
      */
     async #loadContainers(force = false) {
+        const generation = ++this.#loadGeneration;
         this.#detachAnimationChangedListener();
         await this.#stopRender();
 
         let oldModelMetadata = { ...(this.#containers.model?.state?.metadata ?? {}) };
         let newModelMetadata = {};
 
-        const promiseArray = [];
+        // Kick off ALL container loads in parallel — the heavy environment download starts now.
+        const allLoadPromises = new Map();
         Object.values(this.#containers).forEach((container) => {
-            promiseArray.push(this.#loadAssetContainer(container, force));
+            allLoadPromises.set(container.state.name, this.#loadAssetContainer(container, force));
+        });
+
+        // When the environment is pending (heavy scene geometry) we defer it to Phase 2 so
+        // the model can render first.  Non-pending environments resolve immediately with
+        // [container, false] and are handled in Phase 1 like any other container.
+        const environmentPending = this.#containers.environment?.state?.isPending === true;
+        const priorityPromises = [];
+        let deferredPromise = null;
+        allLoadPromises.forEach((promise, name) => {
+            if (name === "environment" && environmentPending) {
+                deferredPromise = promise;
+            } else {
+                priorityPromises.push(promise);
+            }
         });
 
         let detail = {
@@ -2424,13 +2453,18 @@ export default class BabylonJSController {
             error: null,
         };
 
-        await Promise.allSettled(promiseArray)
+        // ── Phase 1: Priority containers (model + materials) ────────────────────
+        await Promise.allSettled(priorityPromises)
             .then(async (values) => {
                 // Scene may have been disposed (disconnectedCallback) while async loading was in
                 // progress.  Abort cleanly: #replaceContainer already guards the GPU calls, but
                 // we skip the post-load option/visibility calls too to avoid further null-derefs.
                 if (!this.#scene) {
                     values.forEach((result) => { result.value?.[1]?.dispose(); });
+                    if (deferredPromise) {
+                        deferredPromise.then((r) => { r?.[1]?.dispose?.(); }).catch(() => {});
+                        deferredPromise = null;
+                    }
                     return;
                 }
                 this.#disposeAnimationController();
@@ -2469,7 +2503,10 @@ export default class BabylonJSController {
                 detail.error = error;
             })
             .finally(async () => {
-                this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
+                if (!deferredPromise) {
+                    // No deferred work — single-phase path (original behaviour).
+                    this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
+                }
                 this.#setMaxSimultaneousLights();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
                 // Apply stored highlight settings so fresh page loads respect persisted state
@@ -2482,6 +2519,48 @@ export default class BabylonJSController {
                 }
                 await this.#startRender();
             });
+
+        // ── Phase 2: Deferred environment (already downloading in parallel) ─────
+        if (deferredPromise) {
+            let deferredResult;
+            try {
+                deferredResult = await deferredPromise;
+            } catch (error) {
+                console.error("PrefViewer: failed to load environment progressively", error);
+                deferredResult = [this.#containers.environment, null];
+            }
+
+            // A newer load() was triggered while we waited — discard stale results.
+            if (this.#loadGeneration !== generation) {
+                deferredResult?.[1]?.dispose?.();
+                return detail;
+            }
+
+            if (this.#scene) {
+                const [container, assetContainer] = deferredResult;
+                if (assetContainer) {
+                    this.#detachAnimationChangedListener();
+                    await this.#stopRender();
+                    this.#assetContainer_retagCameras(assetContainer);
+                    this.#replaceContainer(container, assetContainer);
+                    container.state.setSuccess(true);
+                    this.#setOptions_Camera();
+                    await this.#setOptions_IBL();
+                    this.#setVisibilityOfWallAndFloorInModel();
+                    this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
+                    this.#setMaxSimultaneousLights();
+                    this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
+                    if (this.#babylonJSAnimationController?.hasAnimations?.()) {
+                        this.#attachAnimationChangedListener();
+                    }
+                    await this.#startRender();
+                } else {
+                    container.state.setSuccess(false);
+                    this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
+                }
+            }
+        }
+
         return detail;
     }
 

package/src/pref-viewer.js

@@ -302,14 +302,22 @@ export default class PrefViewer extends HTMLElement {
         if (this.#menu3D) {
             this.#menu3D.removeEventListener("pref-viewer-menu-3d-apply", this.#handlers.onMenuApply);
             this.#menu3D.remove();
+            this.#menu3D = null;
         }
-        
+        if (this.#handlers.onViewerHoverStart) {
+            this.#wrapper.removeEventListener("mouseenter", this.#handlers.onViewerHoverStart);
+            this.#handlers.onViewerHoverStart = null;
+        }
+        if (this.#handlers.onViewerHoverEnd) {
+            this.#wrapper.removeEventListener("mouseleave", this.#handlers.onViewerHoverEnd);
+            this.#handlers.onViewerHoverEnd = null;
+        }
+
         // Check if menu should be shown (default: true if not specified)
         const showMenuAttr = this.getAttribute("show-menu");
         const showMenu = showMenuAttr === null || showMenuAttr === "true";
-        
+
         if (!showMenu) {
-            this.#menu3D = null;
             return;
         }