@saasquatch/squatch-js 2.8.2-3 → 2.8.2-31

package/dist/squatch.esm.js

@@ -1106,351 +1106,6 @@ function delay(duration) {
     setTimeout(resolve, duration);
   });
 }
-const getSkeleton = ({
-  height = "500px",
-  skeletonBackgroundColor = "#e0e0e0",
-  skeletonShimmerColor = "#f5f5f5",
-  borderColor = "#ccc"
-}) => {
-  return `
-    <style>
-        * {
-          box-sizing: border-box;
-          padding: 0;
-          margin: 0;
-        }
-
-			.widget-container {
-				background: white;
-				width: 100%;
-				max-width: 900px;
-				padding: 40px;
-				border-radius: 12px;
-				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-				box-sizing: border-box;
-			}
-
-			@keyframes shimmer {
-				0% {
-					background-position: -100% 0;
-				}
-				100% {
-					background-position: 100% 0;
-				}
-			}
-
-			.skeleton {
-				background: ${skeletonBackgroundColor};
-				background: linear-gradient(
-					90deg,
-					${skeletonBackgroundColor} 25%,
-					${skeletonShimmerColor} 50%,
-					${skeletonBackgroundColor} 75%
-				);
-				background-size: 200% 100%;
-				animation: shimmer 1.5s infinite linear;
-				border-radius: 6px;
-				margin-bottom: 12px;
-			}
-
-			.sk-title-lg {
-				height: 36px;
-				width: 50%;
-				margin-bottom: 16px;
-			}
-			.sk-title-md {
-				height: 28px;
-				width: 30%;
-				margin-bottom: 20px;
-				margin-top: 40px;
-			}
-			.sk-text {
-				height: 16px;
-				width: 80%;
-				margin-bottom: 8px;
-			}
-			.sk-text-short {
-				width: 40%;
-			}
-			.sk-label {
-				height: 14px;
-				width: 25%;
-				margin-bottom: 10px;
-			}
-
-			.hero-section {
-				display: flex;
-				gap: 40px;
-				margin-bottom: 40px;
-				border-bottom: 1px solid ${borderColor};
-				padding-bottom: 40px;
-				flex-direction: row;
-			}
-			.hero-content {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-			}
-			.hero-image {
-				flex: 1;
-				height: 300px;
-				border-radius: 12px;
-			}
-
-			.share-section {
-				margin-bottom: 40px;
-			}
-			.sk-input {
-				height: 50px;
-				width: 100%;
-				border-radius: 8px;
-				margin-bottom: 16px;
-			}
-			.social-buttons {
-				display: flex;
-				gap: 12px;
-			}
-			.sk-btn-social {
-				flex: 1;
-				height: 50px;
-				border-radius: 8px;
-			}
-
-			.stats-section {
-				display: flex;
-				gap: 24px;
-				margin-bottom: 40px;
-				padding: 30px 0;
-				border-top: 1px solid ${borderColor};
-				border-bottom: 1px solid ${borderColor};
-			}
-			.stat-card {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-			}
-			.stat-divider {
-				padding-left: 24px;
-			}
-
-			.sk-stat-num {
-				height: 48px;
-				width: 120px;
-				margin-bottom: 8px;
-			}
-			.sk-stat-label {
-				height: 18px;
-				width: 80px;
-			}
-
-			.table-header {
-				display: flex;
-				gap: 16px;
-				margin-bottom: 16px;
-			}
-			.sk-th {
-				height: 16px;
-			}
-			.table-row {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-				padding: 16px 0;
-				border-bottom: 1px solid ${borderColor};
-			}
-
-			.col-user {
-				flex: 2;
-			}
-			.col-status {
-				flex: 1;
-			}
-			.col-reward {
-				flex: 2;
-			}
-			.col-date {
-				flex: 1;
-			}
-
-			.sk-badge {
-				height: 28px;
-				width: 90px;
-				border-radius: 14px;
-			}
-			.sk-reward-block {
-				height: 36px;
-				width: 100%;
-				border-radius: 6px;
-			}
-
-			.pagination {
-				display: flex;
-				justify-content: flex-end;
-				gap: 8px;
-				margin-top: 24px;
-			}
-			.sk-btn-page {
-				height: 36px;
-				width: 64px;
-				border-radius: 6px;
-				margin-bottom: 0;
-			}
-
-			@media (max-width: 768px) {
-				body {
-					padding: 20px;
-				}
-				.widget-container {
-					padding: 24px;
-				}
-
-				.hero-section {
-					flex-direction: column-reverse;
-					gap: 24px;
-				}
-				.hero-image {
-					height: 220px;
-					width: 100%;
-				}
-				.sk-title-lg {
-					width: 80%;
-				}
-
-				.col-date {
-					display: none;
-				}
-			}
-
-			@media (max-width: 480px) {
-				body {
-					padding: 10px;
-				}
-				.widget-container {
-					padding: 16px;
-				}
-
-				.sk-stat-num {
-					width: 80px;
-					height: 40px;
-				}
-
-				.col-reward {
-					display: none;
-				}
-
-				.col-user {
-					flex: 3;
-				}
-				.col-status {
-					flex: 2;
-					display: flex;
-					justify-content: flex-end;
-				}
-			}
-    </style>
-
-    <div class="widget-container">
-			<div class="hero-section">
-				<div class="hero-content">
-					<div class="skeleton sk-title-lg"></div>
-					<div class="skeleton sk-text"></div>
-					<div class="skeleton sk-text sk-text-short"></div>
-				</div>
-				<div class="skeleton hero-image"></div>
-			</div>
-
-			<div class="share-section">
-				<div class="skeleton sk-label"></div>
-				<div class="skeleton sk-input"></div>
-				<div class="social-buttons">
-					<div class="skeleton sk-btn-social"></div>
-					<div class="skeleton sk-btn-social"></div>
-					<div class="skeleton sk-btn-social"></div>
-					<div class="skeleton sk-btn-social"></div>
-				</div>
-			</div>
-
-			<div
-				class="skeleton sk-title-md"
-				style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"
-			></div>
-			<div
-				class="skeleton sk-text"
-				style="width: 60%; margin-left: auto; margin-right: auto"
-			></div>
-
-			<div class="stats-section">
-				<div class="stat-card">
-					<div class="skeleton sk-stat-num"></div>
-					<div class="skeleton sk-stat-label"></div>
-				</div>
-				<div class="stat-card stat-divider">
-					<div class="skeleton sk-stat-num"></div>
-					<div class="skeleton sk-stat-label"></div>
-				</div>
-			</div>
-
-			<div class="skeleton sk-title-md"></div>
-
-			<div class="table-header">
-				<div class="skeleton sk-th col-user"></div>
-				<div class="skeleton sk-th col-status"></div>
-				<div class="skeleton sk-th col-reward"></div>
-				<div class="skeleton sk-th col-date"></div>
-			</div>
-
-			<div class="table-row">
-				<div class="col-user">
-					<div class="skeleton sk-text" style="width: 70%; margin: 0"></div>
-				</div>
-				<div class="col-status">
-					<div class="skeleton sk-badge" style="margin: 0"></div>
-				</div>
-				<div class="col-reward">
-					<div class="skeleton sk-reward-block" style="margin: 0"></div>
-				</div>
-				<div class="col-date">
-					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
-				</div>
-			</div>
-			<div class="table-row">
-				<div class="col-user">
-					<div class="skeleton sk-text" style="width: 60%; margin: 0"></div>
-				</div>
-				<div class="col-status">
-					<div class="skeleton sk-badge" style="margin: 0"></div>
-				</div>
-				<div class="col-reward">
-					<div class="skeleton sk-reward-block" style="margin: 0"></div>
-				</div>
-				<div class="col-date">
-					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
-				</div>
-			</div>
-			<div class="table-row">
-				<div class="col-user">
-					<div class="skeleton sk-text" style="width: 75%; margin: 0"></div>
-				</div>
-				<div class="col-status">
-					<div class="skeleton sk-badge" style="margin: 0"></div>
-				</div>
-				<div class="col-reward">
-					<div class="skeleton sk-reward-block" style="margin: 0"></div>
-				</div>
-				<div class="col-date">
-					<div class="skeleton sk-text" style="width: 80%; margin: 0"></div>
-				</div>
-			</div>
-
-			<div class="pagination">
-				<div class="skeleton sk-btn-page"></div>
-				<div class="skeleton sk-btn-page"></div>
-			</div>
-		</div>
-  `;
-};
 const _log$7 = browserExports.debug("squatch-js:EMBEDwidget");
 class EmbedWidget extends Widget {
   constructor(params, container) {
@@ -1462,60 +1117,37 @@ class EmbedWidget extends Widget {
     }
   }
   async load() {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    var _a2, _b, _c, _d, _e, _f, _g;
     const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
     const initialHeight = brandingConfig == null ? void 0 : brandingConfig.loadingHeight;
-    const skeletonBackgroundColor = (_d = (_c = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _c.loadingSkeleton) == null ? void 0 : _d.background;
-    const skeletonShimmerColor = (_f = (_e = brandingConfig == null ? void 0 : brandingConfig.color) == null ? void 0 : _e.loadingSkeleton) == null ? void 0 : _f.animationBackground;
-    const borderColor = (_g = brandingConfig == null ? void 0 : brandingConfig.border) == null ? void 0 : _g.borderColor;
-    const sizes = (_h = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _h.embeddedWidgets;
+    const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.embeddedWidgets;
     const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "";
     const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "";
-    console.log({
-      brandingConfig,
-      initialHeight,
-      widgetConfig: this.context.widgetConfig
-    });
-    const skeletonHTML = getSkeleton({
-      height: initialHeight,
-      skeletonBackgroundColor,
-      skeletonShimmerColor,
-      borderColor
-    });
-    const skeletonContainer = document.createElement("div");
-    skeletonContainer.innerHTML = skeletonHTML;
     const frame = this._createFrame({
       minWidth,
       maxWidth,
       initialHeight
     });
     const element = this._findElement();
-    element.innerHTML = skeletonHTML;
-    frame.style.display = "none";
-    const injectContents = (target) => {
-      target.appendChild(skeletonContainer);
-      target.appendChild(frame);
-    };
-    if ((_i = this.context) == null ? void 0 : _i.container) {
+    if ((_d = this.context) == null ? void 0 : _d.container) {
       element.style.visibility = "hidden";
       element.style.height = "0";
       element.style["overflow-y"] = "hidden";
     }
     if (this.container) {
       if (element.shadowRoot) {
-        if (((_j = element.shadowRoot.lastChild) == null ? void 0 : _j.nodeName) === "IFRAME") {
+        if (((_e = element.shadowRoot.lastChild) == null ? void 0 : _e.nodeName) === "IFRAME") {
           element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
         } else {
-          injectContents(element.shadowRoot);
+          element.shadowRoot.appendChild(frame);
         }
       } else if (element.firstChild) {
-        element.innerHTML = "";
-        injectContents(element);
+        element.replaceChild(frame, element.firstChild);
       } else {
-        injectContents(element);
+        element.appendChild(frame);
       }
     } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-      injectContents(element);
+      element.appendChild(frame);
     }
     const { contentWindow } = frame;
     if (!contentWindow) {
@@ -1523,16 +1155,15 @@ class EmbedWidget extends Widget {
     }
     const frameDoc = contentWindow.document;
     frameDoc.open();
-    console.log({ content: this.content, context: this.context, this: this });
     const domain = this.widgetApi.domain;
     frameDoc.write(`
-      ${((_k = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _k.brandFont) && `
+      ${((_f = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _f.brandFont) ? `
         <link rel="preconnect" href="https://fast${domain === "https://staging.referralsaasquatch.com" && "-staging"}.ssqt.io">
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preload" href="https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-      (_l = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _l.brandFont
-    )}" as="style">`}
+      (_g = brandingConfig == null ? void 0 : brandingConfig.main) == null ? void 0 : _g.brandFont
+    )}" as="style">` : ""}
       <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>
       <style data-styles>
         html { visibility:hidden;}
@@ -1542,10 +1173,6 @@ class EmbedWidget extends Widget {
       `);
     frameDoc.close();
     domready(frameDoc, async () => {
-      if (skeletonContainer && skeletonContainer.parentNode) {
-        skeletonContainer.parentNode.removeChild(skeletonContainer);
-      }
-      frame.style.display = "block";
       const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
       frame.height = initialHeight || frameDoc.body.scrollHeight;
       console.log({ height: frameDoc.body.scrollHeight });
@@ -2230,6 +1857,264 @@ function _getAutoConfig() {
     }
   };
 }
+const getSkeleton = ({
+  type = "verified-access",
+  height = "500px",
+  skeletonBackgroundColor = "#e0e0e0",
+  skeletonShimmerColor = "#f5f5f5"
+}) => {
+  const referrerHTML = `
+    <div class="hero-section">
+        <div class="hero-content">
+          <div class="skeleton sk-title-lg"></div>
+          <div class="skeleton sk-text"></div>
+          <div class="skeleton sk-text sk-text-short"></div>
+        </div>
+        <div class="skeleton hero-image"></div>
+    </div>
+
+    <div class="share-section">
+      <div class="skeleton sk-label"></div>
+      <div class="skeleton sk-input"></div>
+      <div class="social-buttons">
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+      </div>
+    </div>
+
+    <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
+    <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
+
+    <div class="stats-section">
+      <div class="stat-card">
+        <div class="skeleton sk-stat-num"></div>
+        <div class="skeleton sk-stat-label"></div>
+      </div>
+      <div class="stat-card stat-divider">
+        <div class="skeleton sk-stat-num"></div>
+        <div class="skeleton sk-stat-label"></div>
+      </div>
+    </div>
+
+    <div class="skeleton sk-title-md"></div>
+
+    <div class="table-header">
+      <div class="skeleton sk-th col-user"></div>
+      <div class="skeleton sk-th col-status"></div>
+      <div class="skeleton sk-th col-reward"></div>
+      <div class="skeleton sk-th col-date"></div>
+    </div>
+
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+    
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+
+    <div class="pagination">
+      <div class="skeleton sk-btn-page"></div>
+      <div class="skeleton sk-btn-page"></div>
+    </div>
+  `;
+  const instantAccessHTML = `
+    <div class="hero-section instant-access-layout">
+        <div class="skeleton hero-image ia-image"></div>
+        
+        <div class="hero-content ia-content">
+          <div class="skeleton sk-title-lg ia-center"></div>
+          <div class="skeleton sk-text ia-center"></div>
+          
+          <div class="skeleton sk-btn-action"></div>
+
+           <div class="skeleton sk-label"></div>
+           <div class="input-group">
+             <div class="skeleton sk-input"></div>
+             <div class="skeleton sk-btn-copy"></div>
+           </div>
+
+           <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
+           <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
+        </div>
+    </div>
+  `;
+  return `
+    <style>
+        * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+
+      .widget-container {
+        background: white;
+        width: 100%;
+        padding: 40px;
+        box-sizing: border-box;
+        overflow: hidden; 
+      }
+
+      @keyframes shimmer {
+        0% { background-position: -100% 0; }
+        100% { background-position: 100% 0; }
+      }
+
+      .skeleton {
+        background: ${skeletonBackgroundColor};
+        background: linear-gradient(
+          90deg,
+          ${skeletonBackgroundColor} 25%,
+          ${skeletonShimmerColor} 50%,
+          ${skeletonBackgroundColor} 75%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite linear;
+        border-radius: 6px;
+        margin-bottom: 12px;
+      }
+
+      /* Typography Skeletons */
+      .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
+      .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
+      .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
+      .sk-text-short { width: 40%; }
+      .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
+
+      /* Layouts */
+      .hero-section {
+        display: flex;
+        gap: 40px;
+        margin-bottom: 40px;
+        padding-bottom: 40px;
+        flex-direction: row;
+        height: 100%;
+        /* Removed border-bottom */
+      }
+      
+      .hero-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      
+      .hero-image {
+        flex: 1;
+        height: 300px;
+        border-radius: 12px;
+      }
+
+      /* -- Specific Instant Access Overrides -- */
+      .instant-access-layout {
+         margin-bottom: 0;
+         padding-bottom: 0;
+         align-items: center; 
+      }
+      .ia-image {
+         height: 400px; 
+      }
+      .ia-center {
+         margin-left: auto;
+         margin-right: auto;
+      }
+      .ia-content {
+         align-items: center; 
+         text-align: center;
+      }
+      .sk-btn-action {
+         height: 45px;
+         width: 140px;
+         border-radius: 6px;
+         margin: 24px auto;
+      }
+      .input-group {
+         display: flex;
+         gap: 10px;
+         width: 100%;
+         max-width: 400px;
+      }
+      .sk-btn-copy {
+         height: 50px;
+         width: 120px;
+         border-radius: 8px;
+      }
+      /* ------------------------------------- */
+
+      .share-section { margin-bottom: 40px; }
+      .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
+      
+      .social-buttons { display: flex; gap: 12px; }
+      .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
+
+      .stats-section {
+        display: flex;
+        gap: 24px;
+        margin-bottom: 40px;
+        padding: 30px 0;
+        /* Removed border-top and border-bottom */
+      }
+      .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
+      .stat-divider { padding-left: 24px; }
+      .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
+      .sk-stat-label { height: 18px; width: 80px; }
+
+      /* Table Styles */
+      .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
+      .sk-th { height: 16px; }
+      .table-row { 
+        display: flex; 
+        align-items: center; 
+        gap: 16px; 
+        padding: 16px 0; 
+        /* Removed border-bottom */
+      }
+      
+      .col-user { flex: 2; }
+      .col-status { flex: 1; }
+      .col-reward { flex: 2; }
+      .col-date { flex: 1; }
+
+      .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
+      .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
+
+      .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+      .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
+
+      @media (max-width: 768px) {
+        body { padding: 20px; }
+        .widget-container { padding: 24px; }
+
+        .hero-section { flex-direction: column-reverse; gap: 24px; }
+        .instant-access-layout { flex-direction: column; }
+        
+        .hero-image { height: 220px; width: 100%; }
+        .sk-title-lg { width: 100%; }
+
+        .col-date { display: none; }
+      }
+    </style>
+
+    <div class="widget-container">
+      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
+    </div>
+  `;
+};
 const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
 function decodeUserJwt(tokenStr) {
   var _a2;
@@ -2368,6 +2253,12 @@ class DeclarativeWidget extends HTMLElement {
       domain: (config == null ? void 0 : config.domain) || ((_b = this.config) == null ? void 0 : _b.domain) || DEFAULT_DOMAIN
     });
   }
+  getWidgetType(widgetType) {
+    if (widgetType && (widgetType.includes("websiteReferralWidget") || widgetType.includes("friendWidget"))) {
+      return "instant-access";
+    }
+    return "verified-access";
+  }
   async renderPasswordlessVariant() {
     this._setupApis();
     _log$1("Rendering as an Instant Access widget");
@@ -2463,12 +2354,26 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
     }
   }
   async connectedCallback() {
-    var _a2, _b;
     this.loaded = true;
     this.container = this.getAttribute("container");
+    this.widgetType = this.getAttribute("widget") || void 0;
+    console.log("widget type", this.widgetType);
+    const skeletonWidgetType = this.getWidgetType(this.widgetType);
+    const skeletonHTML = getSkeleton({
+      height: "100%",
+      type: skeletonWidgetType
+    });
+    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 slot = (_a2 = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _a2.find((c) => c.tagName === "SLOT");
-    if (slot) (_b = this.shadowRoot) == null ? void 0 : _b.removeChild(slot);
+    const loadingElement = root.getElementById("loading-skeleton");
+    if (loadingElement) {
+      loadingElement.remove();
+    }
     if (this.getAttribute("open") !== null) this.open();
   }
 }
@@ -2497,7 +2402,27 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   async connectedCallback() {
     this.loaded = true;
     this.container = this.getAttribute("container");
+    this.widgetType = this.getAttribute("widget") || void 0;
+    const skeletonWidgetType = this.getWidgetType(this.widgetType);
+    const skeletonHTML = getSkeleton({
+      height: "100%",
+      type: skeletonWidgetType
+    });
+    const skeletonContainer = document.createElement("div");
+    skeletonContainer.id = "loading-skeleton";
+    skeletonContainer.innerHTML = skeletonHTML;
+    const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+    const container = root.getElementById("#squatchModal");
+    console.log("Container is ", container);
+    if (container) {
+      container.innerHTML = "";
+      container.appendChild(skeletonContainer);
+    }
     await this.renderWidget();
+    const loadingElement = root.getElementById("loading-skeleton");
+    if (loadingElement) {
+      loadingElement.remove();
+    }
     if (this.getAttribute("open") !== null) this.open();
   }
 }