fix skeleton showing for declarative popup widgets

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.8.4] - 2026-04-01
+
+### Fixed
+
+- Loading skeleton was showing inside \<impact-popup> container on initial loads
+
 ## [2.8.3] - 2026-04-01
 
 ### Added
@@ -412,7 +418,8 @@ No release notes.
 
 No release notes.
 
-[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.3...HEAD
+[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.4...HEAD
+[2.8.4]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.2...@saasquatch%2Fsquatch-js@2.8.4
 [2.8.3]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.2...@saasquatch%2Fsquatch-js@2.8.3
 [2.8.2]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.1...@saasquatch%2Fsquatch-js@2.8.2
 [2.8.1]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.8.0...@saasquatch%2Fsquatch-js@2.8.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/squatch-js",
   "type": "module",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "description": "The official Referral SaaSquatch Javascript Web/Browser SDK https://docs.referralsaasquatch.com/developer/squatchjs/",
   "license": "MIT",
   "author": "ReferralSaaSquatch.com, Inc.",

src/widgets/declarative/DeclarativeWidget.ts

@@ -349,14 +349,13 @@ export default abstract class DeclarativeWidget extends HTMLElement {
 
     const root = this.shadowRoot || this.attachShadow({ mode: "open" });
 
-    // For popup widgets, insert skeleton into the dialog container if it exists
+    // For popup widgets, only show skeleton inside an existing dialog (re-render case).
+    // On first render, skip skeleton since the popup isn't visible yet.
     if (this.type === "POPUP") {
       const dialogContainer = root.getElementById("squatchModal");
       if (dialogContainer) {
         dialogContainer.innerHTML = "";
         dialogContainer.appendChild(skeletonContainer);
-      } else {
-        root.appendChild(skeletonContainer);
       }
     } else {
       root.innerHTML = "";

test/specs/DeclarativeWidgets.feature

@@ -440,7 +440,17 @@ Feature: Declarative widgets using custom Web Components
     Examples:
       | component     |
       | squatch-embed |
-      | squatch-popup |
+
+  @motivating @automated
+  Scenario: No loading skeleton is displayed for popup widgets before the popup is opened
+    Given window.squatchTenant is "valid"
+    And window.squatchToken is "a valid token"
+    And the squatch-popup web-component is included in the page's HTML
+    And the widget attribute is set to a valid SaaSquatch widget type
+    When the component starts loading
+    Then no loading skeleton is injected into the shadow DOM
+    When the widget finishes loading
+    Then no loading skeleton is present in the shadow DOM
 
   @minutia @automated
   Scenario Outline: Loading skeleton type is determined by the widget type

test/step_definitions/DeclarativeWidgets.steps.ts

@@ -1341,6 +1341,63 @@ defineFeature(feature, (test) => {
     });
   });
 
+  test("No loading skeleton is displayed for popup widgets before the popup is opened", ({
+    given,
+    and,
+    when,
+    then,
+  }) => {
+    let el!: DeclarativePopupWidget;
+    let renderPromiseResolve!: () => void;
+    let renderPromise!: Promise<void>;
+
+    Background(given);
+    SquatchTenantIs(given);
+    SquatchTokenIs(and);
+
+    and(/^the (.*) web-component is included in the page's HTML$/, (arg0) => {
+      el = specificWebComponentIsIncluded(arg0) as DeclarativePopupWidget;
+    });
+
+    and("the widget attribute is set to a valid SaaSquatch widget type", () => {
+      el.setAttribute("widget", "w/widget-type");
+    });
+
+    when("the component starts loading", () => {
+      renderPromise = new Promise((resolve) => {
+        renderPromiseResolve = resolve;
+      });
+      const originalRenderWidget = el.renderWidget.bind(el);
+      let proceedResolve: () => void;
+      const proceedPromise = new Promise<void>((r) => {
+        proceedResolve = r;
+      });
+      vi.spyOn(el, "renderWidget").mockImplementation(async () => {
+        await proceedPromise;
+        await originalRenderWidget();
+        renderPromiseResolve();
+      });
+      document.body.appendChild(el);
+      setTimeout(() => proceedResolve!(), 200);
+    });
+
+    then("no loading skeleton is injected into the shadow DOM", async () => {
+      // Give it time to potentially inject a skeleton, then confirm none exists
+      await new Promise((r) => setTimeout(r, 100));
+      const skeleton = el.shadowRoot?.getElementById("loading-skeleton");
+      expect(skeleton).toBeNull();
+    });
+
+    when("the widget finishes loading", async () => {
+      await renderPromise;
+    });
+
+    then("no loading skeleton is present in the shadow DOM", () => {
+      const skeleton = el.shadowRoot?.getElementById("loading-skeleton");
+      expect(skeleton).toBeNull();
+    });
+  });
+
   test("Loading skeleton type is determined by the widget type", ({
     given,
     and,