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

package/dist/squatch.js

@@ -2467,31 +2467,52 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     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 {
@@ -2521,9 +2542,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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(