@primestyleai/tryon 3.6.5 → 3.6.6

package/dist/react/index.js

@@ -261,11 +261,11 @@ function PrimeStyleTryonInner({
   const progressBarRef = useRef(null);
   const progressTextRef = useRef(null);
   const progressStatusRef = useRef(null);
+  const progressIntervalRef = useRef(null);
   useEffect(() => {
     if (view === "processing") {
+      if (progressIntervalRef.current) return;
       progressRef.current = 0;
-      if (progressBarRef.current) progressBarRef.current.style.width = "0%";
-      if (progressTextRef.current) progressTextRef.current.textContent = "0%";
       const statuses = [
         { at: 0, text: "Preparing your image..." },
         { at: 15, text: "Analyzing body proportions..." },
@@ -274,7 +274,7 @@ function PrimeStyleTryonInner({
         { at: 75, text: "Refining details..." },
         { at: 90, text: "Almost there..." }
       ];
-      const interval = setInterval(() => {
+      progressIntervalRef.current = setInterval(() => {
         const p = progressRef.current;
         if (p >= 100) return;
         const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
@@ -287,7 +287,15 @@ function PrimeStyleTryonInner({
           if (status) progressStatusRef.current.textContent = status.text;
         }
       }, 200);
-      return () => clearInterval(interval);
+      return () => {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      };
+    } else {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
     }
   }, [view]);
   useEffect(() => {
@@ -1071,6 +1079,17 @@ function PrimeStyleTryonInner({
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function ProcessingView() {
+    const barCb = useCallback((el) => {
+      progressBarRef.current = el;
+      if (el) el.style.width = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const pctCb = useCallback((el) => {
+      progressTextRef.current = el;
+      if (el) el.textContent = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const statusCb = useCallback((el) => {
+      progressStatusRef.current = el;
+    }, []);
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
         previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1081,10 +1100,10 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill" }) }),
-        /* @__PURE__ */ jsx("span", { ref: progressTextRef, className: "ps-tryon-progress-pct", children: "0%" })
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
+        /* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
       ] }),
-      /* @__PURE__ */ jsx("div", { ref: progressStatusRef, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
+      /* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
       /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }

package/package.json

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