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

package/dist/squatch.js

@@ -2467,27 +2467,21 @@ 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>
+        <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();
       }
@@ -2517,54 +2511,30 @@ 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 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 {