@primestyleai/tryon 5.5.24 → 5.5.26

package/dist/react/index.js

@@ -5397,14 +5397,13 @@ function SectionDetailView({
       return { area: m.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
   }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
-  const displayLength = selectedLength || recLength;
   const goodCount = fitRows.filter(
     (r) => r.fit === "good" || r.fit === "a-bit-tight" || r.fit === "a-bit-loose"
   ).length;
   const matchPercent = fitRows.length > 0 ? Math.round(goodCount / fitRows.length * 100) : 0;
   const secAny = sectionResult;
-  const backendLength = secAny?.length || displayLength;
-  const backendSize = secAny?.size || displaySize;
+  const backendSize = secAny?.size || recSize;
+  const backendLength = secAny?.length || recLength;
   const backendAvailableSizes = secAny?.availableSizes || [];
   const backendAvailableLengths = secAny?.availableLengths || [];
   const finalDisplayLength = selectedLength || backendLength;
@@ -5463,9 +5462,9 @@ function SectionDetailView({
       ] }),
       productImage && /* @__PURE__ */ jsx("div", { className: "ps-msd-image", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle || "", className: "ps-msd-image-img" }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("RECOMMENDED SIZE") }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: displaySize === backendSize ? t("RECOMMENDED SIZE") : t("TRYING SIZE") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-size-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: backendSize }),
+          /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: displaySize }),
           finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-card-divider" }),
@@ -5506,7 +5505,7 @@ function SectionDetailView({
                 /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-label", children: [
                   t("SIZE"),
                   " ",
-                  backendSize
+                  displaySize
                 ] }),
                 /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: row.chartLabel })
               ] })
@@ -5554,7 +5553,7 @@ function SectionDetailView({
         t("*Our sizing engine recommends"),
         " ",
         backendSize,
-        finalDisplayLength ? ` (${finalDisplayLength})` : "",
+        backendLength ? ` (${backendLength})` : "",
         " ",
         t("based on your measurements and the garment's tailoring chart.")
       ] })
@@ -5564,7 +5563,7 @@ function SectionDetailView({
     /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75vw", fontWeight: 700, color: "var(--ps-accent)", textTransform: "uppercase", letterSpacing: "0.12em" }, children: isRecommended ? t("Recommended Size") : t("Not Recommended") }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.5vw", marginTop: "0.3vw", marginBottom: "0.4vw" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "3.5vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: backendSize }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "3.5vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: displaySize }),
         finalDisplayLength && /* @__PURE__ */ jsx("span", { style: { fontSize: "1.4vw", fontWeight: 400, color: "var(--ps-text-secondary)" }, children: finalDisplayLength })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
@@ -5792,6 +5791,15 @@ function SizeResultView({
   const [poseLines, setPoseLines] = useState(null);
   const [poseReady, setPoseReady] = useState(false);
   const [imgDims, setImgDims] = useState({ w: 800, h: 1200 });
+  const [analyzingDone, setAnalyzingDone] = useState(false);
+  useEffect(() => {
+    if (!bodyLandmarks) {
+      setAnalyzingDone(false);
+      return;
+    }
+    const id = setTimeout(() => setAnalyzingDone(true), 1800);
+    return () => clearTimeout(id);
+  }, [bodyLandmarks]);
   const handleImgLoad = useCallback((e) => {
     const el = e.currentTarget;
     if (el.naturalWidth && el.naturalHeight) {
@@ -5961,12 +5969,12 @@ function SizeResultView({
           /* @__PURE__ */ jsx("span", { children: t("Detecting body pose") })
         ] }),
         !sizingDone && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${bodyLandmarks ? " ps-active" : ""}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: bodyLandmarks ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) }),
+          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : bodyLandmarks ? " ps-active" : ""}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !bodyLandmarks ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
             /* @__PURE__ */ jsx("span", { children: t("Analyzing your size") })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) }),
+          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
             /* @__PURE__ */ jsx("span", { children: t("Finding best fit for you") })
           ] })
         ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.5.24",
+  "version": "5.5.26",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",