@thefittingroom/shop-ui 3.0.0-alpha-13 → 3.0.0-alpha-15

package/dist/esm/components/SizeRec.d.ts

@@ -51,6 +51,7 @@ export declare class SizeRecComponent {
     private init;
     private setElements;
     private bindEvents;
+    private _preloadNeighborVTO;
     private onSizeRecSelectClick;
     private renderSizeRec;
     private renderSizeRecTable;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v3.0.0-alpha-13 (2025-04-18T19:25:18.466Z)
+* thefittingroom v3.0.0-alpha-14 (2025-06-30T17:08:48.412Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -27621,18 +27621,30 @@ class SizeRecComponent {
             try {
                 // Get all size buttons
                 const allSizeButtons = Array.from(document.querySelectorAll('.tfr-size-rec-select-button'));
-                // Request frames for all sizes concurrently
-                await Promise.all(allSizeButtons.map(async (button) => {
-                    const sizeId = Number(button.getAttribute('data-size-id'));
-                    if (Number.isNaN(sizeId))
-                        return;
-                    // Only display the active size, others are just requested
-                    const shouldDisplay = button === activeButton;
-                    await this.onTryOnClick(this.styleId, sizeId, shouldDisplay);
-                }));
+                const activeIndex = allSizeButtons.indexOf(activeButton);
+                if (this.styleId !== null) {
+                    // 1. Fetch and display the VTO for the active (recommended) size
+                    try {
+                        await this.onTryOnClick(this.styleId, selectedSizeId, true);
+                    }
+                    catch (e) {
+                        console.error(`Error trying on active size ${selectedSizeId}:`, e);
+                        // Optionally, inform the user about the error for the primary VTO
+                    }
+                    // 2. Fetch VTO for the size to the left (if it exists)
+                    if (activeIndex > 0) {
+                        const leftButton = allSizeButtons[activeIndex - 1];
+                        await this._preloadNeighborVTO(leftButton);
+                    }
+                    // 3. Fetch VTO for the size to the right (if it exists)
+                    if (activeIndex >= 0 && activeIndex < allSizeButtons.length - 1) {
+                        const rightButton = allSizeButtons[activeIndex + 1];
+                        await this._preloadNeighborVTO(rightButton);
+                    }
+                }
             }
             catch (error) {
-                console.error('Error during try-on:', error);
+                console.error('Error during sequential try-on process:', error);
             }
             finally {
                 // Reset loading state
@@ -27642,6 +27654,21 @@ class SizeRecComponent {
             }
         });
     }
+    async _preloadNeighborVTO(buttonElement) {
+        var _a;
+        // this.styleId is assumed to be non-null here because the calling context (bindEvents)
+        // is wrapped in 'if (this.styleId !== null)'
+        const sizeId = Number(buttonElement.getAttribute('data-size-id'));
+        if (!Number.isNaN(sizeId)) {
+            try {
+                await this.onTryOnClick(this.styleId, sizeId, false);
+            }
+            catch (e) {
+                const buttonText = ((_a = buttonElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || 'N/A';
+                console.error(`Error pre-loading try-on for size ${sizeId} (button: ${buttonText}):`, e);
+            }
+        }
+    }
     onSizeRecSelectClick(e) {
         const target = e.target;
         if (!target.classList.contains('tfr-size-rec-select-button') || target.classList.contains('tfr-disabled'))
@@ -27900,10 +27927,10 @@ class TfrSizeRec {
         if (!sizeRec)
             return null;
         return {
-            recommended: sizeRec.recommended_size.size_value.size,
+            recommended: sizeRec.recommended_size.size_value.name,
             sizes: sizeRec.fits.map((fit) => {
                 return {
-                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).size_value.size,
+                    size: sizeRec.available_sizes.find((size) => size.id === fit.size_id).size_value.name,
                     size_id: fit.size_id,
                     locations: fit.measurement_location_fits
                         .map((locationFit) => {