Widget load improvements

package.json

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

src/api/WidgetApi.ts

@@ -113,6 +113,8 @@ export default class WidgetApi {
     const clean = validatePasswordlessConfig(raw);
     const { widgetType, engagementMedium = "POPUP", jwt, user } = clean;
 
+    console.log({ params });
+
     const tenantAlias = encodeURIComponent(this.tenantAlias);
     const accountId = user?.accountId
       ? encodeURIComponent(user.accountId)

src/widgets/EmbedWidget.ts

@@ -5,6 +5,7 @@ import { UpsertWidgetContext } from "../types";
 import { domready } from "../utils/domready";
 import { formatWidth } from "../utils/widgetUtils";
 import Widget, { Params } from "./Widget";
+import { getSkeleton } from "./SkeletonTemplate";
 
 const _log = debug("squatch-js:EMBEDwidget");
 
@@ -23,18 +24,59 @@ export default class EmbedWidget extends Widget {
   constructor(params: Params, container?: HTMLElement | string) {
     super(params);
 
-    if (container) this.container = container;
+    if (container) {
+      this.container = container;
+    }
   }
 
   async load() {
     const brandingConfig = this.context.widgetConfig?.values?.brandingConfig;
+    // @ts-ignore
+    const initialHeight = brandingConfig?.loadingHeight;
+    const skeletonBackgroundColor =
+      brandingConfig?.color?.loadingSkeleton?.background;
+    const skeletonShimmerColor =
+      brandingConfig?.color?.loadingSkeleton?.animationBackground;
+    const borderColor = brandingConfig?.border?.borderColor;
     const sizes = brandingConfig?.widgetSize?.embeddedWidgets;
     const maxWidth = sizes?.maxWidth ? formatWidth(sizes.maxWidth) : "";
     const minWidth = sizes?.minWidth ? formatWidth(sizes.minWidth) : "";
 
-    const frame = this._createFrame({ minWidth, maxWidth });
+    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;
+
+    // Hide frame initially
+    frame.style.display = "none";
+
+    const injectContents = (target: HTMLElement | ShadowRoot) => {
+      // Optional: Clear target to prevent duplicates if load() is called twice
+      // target.innerHTML = "";
+      target.appendChild(skeletonContainer);
+      target.appendChild(frame);
+    };
+
     if (this.context?.container) {
       // Custom container is used
       element.style.visibility = "hidden";
@@ -47,18 +89,17 @@ export default class EmbedWidget extends Widget {
         if (element.shadowRoot.lastChild?.nodeName === "IFRAME") {
           element.shadowRoot.replaceChild(frame, element.shadowRoot.lastChild);
         } else {
-          element.shadowRoot.appendChild(frame);
+          injectContents(element.shadowRoot);
         }
-      }
-      // Widget reloaded - replace existing element
-      else if (element.firstChild) {
-        element.replaceChild(frame, element.firstChild);
-        // Add iframe for the first time
+      } else if (element.firstChild) {
+        // If replacing, wipe and reload
+        element.innerHTML = "";
+        injectContents(element);
       } else {
-        element.appendChild(frame);
+        injectContents(element);
       }
     } else if (!element.firstChild || element.firstChild.nodeName === "#text") {
-      element.appendChild(frame);
+      injectContents(element);
     }
 
     const { contentWindow } = frame;
@@ -68,16 +109,45 @@ export default class EmbedWidget extends Widget {
 
     const frameDoc = contentWindow.document;
     frameDoc.open();
-    frameDoc.write(this.content);
-    frameDoc.write(
-      `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>`
-    );
+
+    console.log({ content: this.content, context: this.context, this: this });
+
+    const domain = this.widgetApi.domain;
+
+    frameDoc.write(`
+      ${
+        brandingConfig?.main?.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(
+          brandingConfig?.main?.brandFont
+        )}" as="style">`
+      }
+      <script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"></script>
+      <style data-styles>
+        html { visibility:hidden;}
+      </style>
+      ${this.content}
+
+      `);
+
     frameDoc.close();
     domready(frameDoc, async () => {
+      if (skeletonContainer && skeletonContainer.parentNode) {
+        skeletonContainer.parentNode.removeChild(skeletonContainer);
+      }
+
+      frame.style.display = "block";
+
       const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
 
       // @ts-ignore -- number will be cast to string by browsers
-      frame.height = frameDoc.body.scrollHeight;
+      frame.height = initialHeight || frameDoc.body.scrollHeight;
+      console.log({ height: frameDoc.body.scrollHeight });
 
       // Adjust frame height when size of body changes
       /* istanbul ignore next: hard to test */