@primestyleai/tryon 3.1.0 → 3.1.1

package/dist/react/index.js

@@ -189,6 +189,7 @@ function PrimeStyleTryonInner({
   const [dragOver, setDragOver] = useState(false);
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
+  const [sizingLoading, setSizingLoading] = useState(false);
   const [sizeGuide, setSizeGuide] = useState(null);
   const [sizeGuideFetching, setSizeGuideFetching] = useState(false);
   const sizeGuideFetchedRef = useRef(false);
@@ -348,6 +349,7 @@ function PrimeStyleTryonInner({
     setErrorMessage(null);
     setSizingMethod(null);
     setSizingResult(null);
+    setSizingLoading(false);
     setSizeGuide(null);
     setProfileSaved(false);
     formRef.current = {};
@@ -459,8 +461,13 @@ function PrimeStyleTryonInner({
       if (res.ok) {
         const data = await res.json();
         setSizingResult(data);
+      } else {
+        console.warn("[PrimeStyle] Sizing API error:", res.status, await res.text().catch(() => ""));
       }
-    } catch {
+    } catch (err) {
+      console.warn("[PrimeStyle] Sizing request failed:", err);
+    } finally {
+      setSizingLoading(false);
     }
   }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
   const handleSubmit = useCallback(async () => {
@@ -473,7 +480,10 @@ function PrimeStyleTryonInner({
     }
     completedRef.current = false;
     setView("processing");
-    if (sizingMethod) submitSizing();
+    if (sizingMethod) {
+      setSizingLoading(true);
+      submitSizing();
+    }
     try {
       const modelImage = await compressImage(selectedFile);
       const response = await apiRef.current.submitTryOn(modelImage, productImage);
@@ -536,6 +546,7 @@ function PrimeStyleTryonInner({
     setErrorMessage(null);
     setSizingMethod(null);
     setSizingResult(null);
+    setSizingLoading(false);
     setProfileSaved(false);
     setView("upload");
   }, [previewUrl, cleanupJob]);
@@ -934,11 +945,16 @@ function PrimeStyleTryonInner({
     ] });
   }
   function ResultView() {
-    const hasBoth = !!resultImageUrl && !!sizingResult;
+    const hasSizing = !!sizingResult || sizingLoading;
+    const hasBoth = !!resultImageUrl && hasSizing;
     const [profileName, setProfileName] = useState("");
     return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-result-layout${hasBoth ? " ps-tryon-result-split" : ""}`, children: [
       resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
+        sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
+          /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
+        ] }),
         sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-confidence", children: [
@@ -1431,6 +1447,13 @@ const STYLES = `
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
     color: #111; font-size: 20px; font-weight: 700; margin-bottom: 10px;
   }
+  .ps-tryon-sizing-loading { text-align: center; padding: 20px 0; }
+  .ps-tryon-size-loading-spinner {
+    width: 36px; height: 36px; border: 3px solid #333;
+    border-top-color: #bb945c; border-radius: 50%;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto 12px;
+  }
+  @keyframes ps-spin { to { transform: rotate(360deg); } }
   .ps-tryon-size-confidence { font-size: 12px; color: #999; margin-bottom: 8px; }
   .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
   .ps-tryon-size-reasoning { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 12px; }

package/package.json

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