@saasquatch/squatch-js 2.8.2-7 → 2.8.2-9

package/dist/squatch.cjs.js

@@ -2464,31 +2464,6 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
         break;
     }
   }
-  //   async connectedCallback() {
-  //     this.loaded = true;
-  //     this.container = this.getAttribute("container");
-  //     // Dynamically assign arbitrary HTML content before rendering the widget
-  //     const dynamicContent = `
-  //     <div>
-  //       <h1>Dynamic Content</h1>
-  //       <p>This content was dynamically added to the widget before it loaded.</p>
-  //     </div>
-  //   `;
-  //     if (this.container) {
-  //       const containerElement = document.querySelector(this.container);
-  //       if (containerElement) {
-  //         containerElement.innerHTML = dynamicContent;
-  //       }
-  //     }
-  //     // Render the widget after setting the dynamic content
-  //     await this.renderWidget();
-  //     const slot = (
-  //       this.shadowRoot && Array.from(this.shadowRoot.children)
-  //     )?.find((c) => c.tagName === "SLOT") as Node;
-  //     if (slot) this.shadowRoot?.removeChild(slot);
-  //     if (this.getAttribute("open") !== null) this.open();
-  //   }
-  // }
   async connectedCallback() {
     var _a2;
     this.loaded = true;
@@ -2497,6 +2472,7 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
     <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>
   `;
     const skeletonContainer = document.createElement("div");
@@ -2541,7 +2517,27 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   async connectedCallback() {
     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 embedded widget class</p>
+      </div>
+    `;
+    const skeletonContainer = document.createElement("div");
+    skeletonContainer.id = "loading-skeleton";
+    skeletonContainer.innerHTML = skeletonHTML;
+    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+    root.innerHTML = "";
+    root.appendChild(skeletonContainer);
     await this.renderWidget();
+    const loadingElement = root.getElementById("loading-skeleton");
+    if (loadingElement) {
+      loadingElement.remove();
+      console.log("Skeleton removed successfully");
+    } else {
+      console.warn("Could not find skeleton to remove");
+    }
     if (this.getAttribute("open") !== null) this.open();
   }
 }