@uxbertlabs/reportly 1.0.15 → 1.0.17

package/dist/reportly.esm.js

@@ -9470,6 +9470,8 @@ class Screenshot {
                     x: window.scrollX,
                     y: window.scrollY,
                     onclone: async () => {
+                        // Show loading screen after clone (won't appear in screenshot)
+                        this.showLoadingScreen();
                         // Wait 1 second after cloning to let animations complete
                         await this.wait(1000);
                     },
@@ -9510,20 +9512,9 @@ class Screenshot {
                     logging: false,
                     width: fullPageWidth,
                     height: fullPageHeight,
-                    onclone: async (domDoc) => {
-                        // Wait 1 second after cloning to let animations complete
-                        await this.wait(1000);
-                        // scroll over the dome from top to bottom
-                        domDoc.defaultView?.scrollTo(0, 0);
-                        await this.wait(500);
-                        // Smooth scroll to bottom
-                        const scrollStep = 100;
-                        for (let scrollY = 0; scrollY < fullPageHeight; scrollY += scrollStep) {
-                            domDoc.defaultView?.scrollTo(0, scrollY);
-                            await this.wait(100);
-                        }
-                        domDoc.defaultView?.scrollTo(0, 0);
-                        await this.wait(3000);
+                    onclone: async () => {
+                        // Show loading screen after clone (won't appear in screenshot)
+                        this.showLoadingScreen();
                     },
                     ignoreElements: (element) => {
                         // Skip cross-origin images that might cause issues
@@ -9553,6 +9544,8 @@ class Screenshot {
             }
             // Show UXbert UI elements again
             this.showUXbertElements();
+            // Hide loading screen
+            this.hideLoadingScreen();
             // Convert to base64
             this.currentScreenshot = canvas.toDataURL("image/png");
             return this.currentScreenshot;
@@ -9560,6 +9553,7 @@ class Screenshot {
         catch (error) {
             console.error("Screenshot capture failed:", error);
             this.showUXbertElements();
+            this.hideLoadingScreen();
             throw error;
         }
     }
@@ -9582,6 +9576,67 @@ class Screenshot {
             }
         });
     }
+    showLoadingScreen() {
+        // Check if loading screen already exists
+        if (document.getElementById("uxbert-screenshot-loading")) {
+            return;
+        }
+        const loadingOverlay = document.createElement("div");
+        loadingOverlay.id = "uxbert-screenshot-loading";
+        loadingOverlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.7);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 999999;
+      backdrop-filter: blur(4px);
+    `;
+        const spinner = document.createElement("div");
+        spinner.style.cssText = `
+      width: 50px;
+      height: 50px;
+      border: 4px solid rgba(255, 255, 255, 0.3);
+      border-top: 4px solid #ffffff;
+      border-radius: 50%;
+      animation: uxbert-spin 1s linear infinite;
+    `;
+        const loadingText = document.createElement("div");
+        loadingText.textContent = "Capturing screenshot...";
+        loadingText.style.cssText = `
+      color: #ffffff;
+      font-size: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin-top: 20px;
+      font-weight: 500;
+    `;
+        // Add keyframe animation if it doesn't exist
+        if (!document.getElementById("uxbert-loading-styles")) {
+            const style = document.createElement("style");
+            style.id = "uxbert-loading-styles";
+            style.textContent = `
+        @keyframes uxbert-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `;
+            document.head.appendChild(style);
+        }
+        loadingOverlay.appendChild(spinner);
+        loadingOverlay.appendChild(loadingText);
+        document.body.appendChild(loadingOverlay);
+    }
+    hideLoadingScreen() {
+        const loadingOverlay = document.getElementById("uxbert-screenshot-loading");
+        if (loadingOverlay) {
+            loadingOverlay.remove();
+        }
+    }
     getScreenshot() {
         return this.currentScreenshot;
     }