Widget load improvements

[Zach Harrison (zachharrison)]

Description of the change

Description here

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation or Development tools (readme, specs, tests, code formatting)

Links

• Jira issue number: (PUT IT HERE)
• Process.st launch checklist: (PUT IT HERE)

Checklists

Development

• Prettier was run (if applicable)
• The behaviour changes in the pull request are covered by specs
• All tests related to the changed code pass in development

Paperwork

• This pull request has a descriptive title and information useful to a reviewer
• This pull request has a Jira number
• This pull request has a Process.st launch checklist

Code review

• Changes have been reviewed by at least one other engineer
• Security impacts of this change have been considered

[github-actions]

A preview of 3f69c73 is uploaded and can be seen here:

✨ https://saasquatch.github.io/squatch-js/pull/66 ✨

[github-actions]

size-limit report 📦

Path	Size
dist/squatch.js	13 KB (+5.57% 🔺)

[Copilot]

Pull request overview

This PR adds loading skeleton support to widget components to improve the perceived loading experience. The changes introduce a skeleton template with shimmer animations that displays while widgets are loading, then smoothly transitions to the actual widget content.

Key Changes

• Added a new SkeletonTemplate.ts module that generates customizable skeleton HTML with CSS animations
• Updated widget classes to display skeleton loading states before rendering actual content
• Extended the iframe creation to support configurable initial heights for better skeleton display

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/widgets/SkeletonTemplate.ts	New file containing skeleton HTML/CSS generator with customizable colors and shimmer animation
src/widgets/EmbedWidget.ts	Integrated skeleton loading state with display toggling and font preloading optimizations
src/widgets/Widget.ts	Added initialHeight parameter to iframe creation options
src/widgets/declarative/DeclarativeWidgets.ts	Added skeleton injection logic to both DeclarativeEmbedWidget and DeclarativePopupWidget classes
src/api/WidgetApi.ts	Added debug logging for widget parameters
package.json	Version bump to 2.8.2-8

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 33 out of 35 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 40 out of 42 changed files in this pull request and generated 5 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 41 out of 43 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (2)

src/widgets/PopupWidget.ts:205

• PopupWidget assumes contentWindow["ResizeObserver"] exists and constructs it unconditionally. If ResizeObserver is not supported in the host browser, this will throw at runtime and break widget rendering/resizing. Consider feature-detecting ResizeObserver and either (a) falling back to a polyfill or (b) using a safer height calculation strategy when it’s unavailable.

      const ro = new contentWindow["ResizeObserver"]((entries) => {
        for (const entry of entries) {
          const { top, bottom } = entry.contentRect;
          const height = bottom + top;
          if (height <= 0) continue;

          if (initialLoad) {
            // Clear loading height constraint and measure true content height
            initialLoad = false;
            frame.style.height = "0";
            frame.height = frameDoc.body.scrollHeight + "";
            frame.style.height = "";
          } else {
            frame.height = height + "";
          }

          // @ts-ignore Don't let anything else set the height of this element
          entry.target.style = "";
        }
      });
      ro.observe(await this._findInnerContainer(frame));
    });

src/widgets/EmbedWidget.ts:137

• EmbedWidget assumes contentWindow["ResizeObserver"] exists and constructs it unconditionally. If ResizeObserver is not supported in the host browser, this throws at runtime and prevents load analytics + resizing from working. Add feature detection and a fallback (polyfill or a non-RO resize strategy).

      // Adjust frame height when size of body changes
      /* istanbul ignore next: hard to test */
      const ro = new contentWindow["ResizeObserver"]((entries) => {
        for (const entry of entries) {
          const { height } = entry.contentRect;
          // @ts-ignore -- number will be cast to string by browsers
          frame.height = height;
        }
      });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 41 out of 43 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 41 out of 43 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (2)

src/widgets/PopupWidget.ts:205

• _setupResizeHandler() assumes contentWindow.ResizeObserver exists (new contentWindow["ResizeObserver"](...)). Since the PR removes the resize-observer polyfill injection, this will throw at runtime in browsers without native ResizeObserver support. Add a guard/fallback (or keep a polyfill path) so unsupported browsers don’t hard-fail.

    // Adjust frame height when size of body changes
    domready(frameDoc, async () => {
      frameDoc.body.style.overflowY = "hidden";
      let initialLoad = true;

      const ro = new contentWindow["ResizeObserver"]((entries) => {
        for (const entry of entries) {
          const { top, bottom } = entry.contentRect;
          const height = bottom + top;
          if (height <= 0) continue;

          if (initialLoad) {
            // Clear loading height constraint and measure true content height
            initialLoad = false;
            frame.style.height = "0";
            frame.height = frameDoc.body.scrollHeight + "";
            frame.style.height = "";
          } else {
            frame.height = height + "";
          }

          // @ts-ignore Don't let anything else set the height of this element
          entry.target.style = "";
        }
      });
      ro.observe(await this._findInnerContainer(frame));
    });

src/widgets/EmbedWidget.ts:140

• load() assumes contentWindow.ResizeObserver exists (new contentWindow["ResizeObserver"](...)). With the removal of the resize-observer polyfill injection, this will throw at runtime in browsers that don’t support ResizeObserver. Add a guard/fallback (or reintroduce a polyfill path) to avoid breaking older environments.

    domready(frameDoc, async () => {
      const _sqh = contentWindow.squatch || contentWindow.widgetIdent;

      // @ts-ignore -- number will be cast to string by browsers
      frame.height = initialHeight;

      // Adjust frame height when size of body changes
      /* istanbul ignore next: hard to test */
      const ro = new contentWindow["ResizeObserver"]((entries) => {
        for (const entry of entries) {
          const { height } = entry.contentRect;
          // @ts-ignore -- number will be cast to string by browsers
          frame.height = height;
        }
      });

      const container = await this._findInnerContainer(frame);
      ro.observe(container);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Sam Beveridge (00salmon)]

good to go 🚀