@saasquatch/squatch-js 2.8.2-12 → 2.8.2-13

package/dist/squatch.esm.js

@@ -2463,31 +2463,52 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
     }
   }
   async connectedCallback() {
-    var _a2;
     this.loaded = true;
     this.container = this.getAttribute("container");
     const skeletonHTML = `
-    <div>
-      <h1>Dynamic Content</h1>
-      <p>This content was dynamically added to the widget before it loaded.</p>
-      <p>This content comes from the embeded widget class</p>
-    </div>
-  `;
+      <div id="loading-skeleton-content">
+        <h1>DO I SEE THIS ?</h1>
+      </div>
+    `;
+    console.log(
+      "/////////////////////////////////TESTING//////////////////////////////"
+    );
     const skeletonContainer = document.createElement("div");
     skeletonContainer.id = "loading-skeleton";
     skeletonContainer.innerHTML = skeletonHTML;
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-    }
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = skeletonHTML;
+    skeletonContainer.style.width = "100%";
+    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+    if (root.firstChild) {
+      root.insertBefore(skeletonContainer, root.firstChild);
+    } else {
+      root.appendChild(skeletonContainer);
     }
-    await this.renderWidget();
-    const loadingElement = (_a2 = this.shadowRoot) == null ? void 0 : _a2.getElementById("loading-skeleton");
-    if (loadingElement) {
-      loadingElement.remove();
+    const removeSkeleton = () => {
+      const el = root.getElementById("loading-skeleton");
+      if (el) {
+        el.remove();
+        console.log("Skeleton removed successfully via event");
+      }
+    };
+    this.addEventListener("sq:load", removeSkeleton);
+    try {
+      await this.renderWidget();
+      console.log("Widget rendered (initialization complete)");
+      setTimeout(() => {
+        const el = root.getElementById("loading-skeleton");
+        if (el) {
+          console.warn("Removing skeleton via timeout (load event missing)");
+          el.remove();
+        }
+      }, 5e3);
+    } catch (err) {
+      console.error("Critical Error in renderWidget:", err);
+      removeSkeleton();
     }
     if (this.getAttribute("open") !== null) this.open();
+    console.log(
+      "/////////////////////////////////DO YOU SEE THIS CONSOLE LOG????//////////////////////////////"
+    );
   }
 }
 class DeclarativePopupWidget extends DeclarativeWidget {
@@ -2517,9 +2538,7 @@ class DeclarativePopupWidget extends DeclarativeWidget {
     this.container = this.getAttribute("container");
     const skeletonHTML = `
       <div id="loading-skeleton-content">
-        <h1>Dynamic Content</h1>
-        <p>This content was dynamically added to the widget before it loaded.</p>
-        <p>This content comes from the embedded widget class</p>
+        <h1>DO I SEE THIS ?</h1>
       </div>
     `;
     console.log(