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

package/dist/squatch.cjs.js

@@ -2465,27 +2465,21 @@ 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>
+        <h1>Do I see this text ????</h1>
+      </div>
+    `;
     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;
-    }
+    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+    root.innerHTML = "";
+    root.appendChild(skeletonContainer);
     await this.renderWidget();
-    const loadingElement = (_a2 = this.shadowRoot) == null ? void 0 : _a2.getElementById("loading-skeleton");
+    const loadingElement = root.getElementById("loading-skeleton");
     if (loadingElement) {
       loadingElement.remove();
     }
@@ -2515,54 +2509,30 @@ class DeclarativePopupWidget extends DeclarativeWidget {
     }
   }
   async connectedCallback() {
+    var _a2;
     this.loaded = true;
     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>
-      </div>
-    `;
-    console.log(
-      "/////////////////////////////////TESTING//////////////////////////////"
-    );
+    <div>
+      <h1>Dynamic Content</h1>
+      <p>This content was dynamically added to the widget before it loaded.</p>
+    </div>
+  `;
     const skeletonContainer = document.createElement("div");
     skeletonContainer.id = "loading-skeleton";
     skeletonContainer.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);
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
     }
-    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.shadowRoot) {
+      this.shadowRoot.innerHTML = skeletonHTML;
+    }
+    await this.renderWidget();
+    const loadingElement = (_a2 = this.shadowRoot) == null ? void 0 : _a2.getElementById("loading-skeleton");
+    if (loadingElement) {
+      loadingElement.remove();
     }
     if (this.getAttribute("open") !== null) this.open();
-    console.log(
-      "/////////////////////////////////DO YOU SEE THIS CONSOLE LOG????//////////////////////////////"
-    );
   }
 }
 class SquatchEmbed extends DeclarativeEmbedWidget {