Widget load improvements by 00salmon · Pull Request #479 · saasquatch/program-tools

Sam Beveridge (00salmon) · 2026-02-20T21:05:04Z

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

Copilot

Pull request overview

This PR implements widget load improvements through the introduction of a custom skeleton component and updates to the tax and cash dashboard to support additional payout hold states.

Changes:

Introduced a new customizable sqm-skeleton component to replace sl-skeleton throughout the codebase
Added support for additional payout hold states (payment on hold, beneficiary name issues, withdrawal settings invalid, payment returned)
Enhanced sqm-header-logo component to support text-based logos as a fallback to images

Reviewed changes

Copilot reviewed 73 out of 75 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx	New skeleton component with customizable width, height, and theming support
packages/mint-components/src/global/styles.ts	Added CSS variables for skeleton background and animation colors
packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.ts	Added new payout status types and logic for handling additional hold reasons
packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx	Updated button labels for consistency and added new alert message properties
packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx	Added loading state support using the new skeleton component
packages/mint-components/src/components/sqm-header-logo/sqm-header-logo.tsx	Added text-based logo support with customizable size and color
packages/mint-components/CHANGELOG.md	Documents changes to payout alert copy and header logo functionality

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

packages/mint-components/src/index.html

+            c["_" + a].ready.push(b);
+          }),
+          (e = document.createElement("script")),
+          (e.async = 1),


Copilot

Pull request overview

Copilot reviewed 81 out of 83 changed files in this pull request and generated 6 comments.

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

Copilot · 2026-02-20T21:17:16Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

+   */
+  @Prop() width?: string = "100%";
+
+  disconnectedCallback() {}


The disconnectedCallback method is empty and serves no purpose. Remove this method to improve code clarity.

Copilot · 2026-02-20T21:17:16Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

@@ -0,0 +1,51 @@
+import { h, Component, State, Prop, Host } from "@stencil/core";


The Host import is added but not used in the component. The render method returns a div instead of using Host. Either use Host as the root element or remove the unused import.

Copilot · 2026-02-20T21:17:17Z

packages/mint-components/src/index.html

+<html>
+  <head>
+    <script>
+      !(function (a, b) {
+        a("squatch", "http://localhost:3333/squatch.min.js", b);
+      })(function (a, b, c) {
+        var d, e, f;
+        (c["_" + a] = {}),
+          (c[a] = {}),
+          (c[a].ready = function (b) {
+            c["_" + a].ready = c["_" + a].ready || [];
+            c["_" + a].ready.push(b);
+          }),
+          (e = document.createElement("script")),
+          (e.async = 1),
+          (e.src = b),
+          (f = document.getElementsByTagName("script")[0]),
+          f.parentNode.insertBefore(e, f);
+      }, this);
+    </script>
+    <script>
+      window.squatchTenant = "ac52kfybp1tkr";
+      window.squatchConfig = {
+        domain: "https://staging.referralsaasquatch.com",
+      };
+      window.squatchToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU";
+      window.widgetIdent = {
+        programId: "41863",
+        userId: "testuser",
+        accountId: "testuser",
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU",
+        tenantAlias: "ac52kfybp1tkr",
+        engagementMedium: "EMBED",
+        appDomain: "https://staging.referralsaasquatch.com",
+      };
+    </script>
+  </head>
+  <body>
+    <impact-embed widget="p/41863/w/referrerWidget"
+      ><div>Loading...</div></impact-embed
+    >
+  </body>
+</html>


The index.html file has been completely replaced with test/demo content that includes hardcoded credentials and tokens. This appears to be intended for development/testing purposes only and should not be committed to the repository. This file should either be reverted to its original stencilbook content or added to .gitignore if it's meant to be a local test file.

Copilot · 2026-02-20T21:17:17Z

packages/mint-components/package.json

  },
  "devDependencies": {
-    "@formatjs/intl": "1.8.4",
+    "@formatjs/intl": "^3.1.8",


The @formatjs/intl dependency is being upgraded from version 1.8.4 to ^3.1.8, which is a major version jump (from v1 to v3). This is a potentially breaking change that could introduce compatibility issues. Ensure that this upgrade has been tested thoroughly and that all formatMessage calls throughout the codebase remain compatible with the new version.

Suggested change

"@formatjs/intl": "^3.1.8",

"@formatjs/intl": "1.8.4",

Copilot · 2026-02-20T21:17:17Z

packages/bedrock-components/stencil.config.ts

+  namespace: "bedrock-components",
  buildEs5: true,
-  globalScript: 'src/global/global.ts',
+  globalScript: "src/global/global.ts",


Setting hydratedFlag: null in bedrock-components explicitly disables the hydration flag feature. For consistency across the monorepo and to ensure similar widget load behavior, consider whether bedrock-components should also use the same hydratedFlag configuration as mint-components, or document why they differ.

Suggested change

globalScript: "src/global/global.ts",

globalScript: "src/global/global.ts",

// Note: We explicitly disable Stencil's hydration flag for bedrock-components.

// This differs from mint-components and is intentional to preserve existing

// widget load behavior and DOM markup expectations in consumers.

Copilot · 2026-02-20T21:17:18Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

+  @State()
+  ignored = true;


The ignored state variable is declared but never used in the component. This appears to be unnecessary code that should be removed to improve maintainability.

Zach Harrison (zachharrison) and others added 17 commits November 14, 2025 11:24

Update leaderboard loading style

6a59ee1

cleaing up some imports

fbfe8fe

upgrade formatjs version

ebb4c02

Add loading state for form message component

4a575b2

Add re-usable skeleton component

ddd68f6

Pass loading prop to form-message instances

274c80b

Merge branch 'community-experts' into widget-load

0fd76b3

Re build after merge

4b50160

Fix payout status alert buttons

4981c8e

Refactor all skeletons to use standard component

5298f88

fiddling with bundling

d99a9a0

Publish new pre release

7fecfd4

Update demo data for testing

f7300cf

Update loading state in rewrds table

5f85807

Hard code QR code loading state

e874f83

New pre release

54621f7

Delete console.log

ff1e714

Copilot AI review requested due to automatic review settings February 20, 2026 21:05

Copilot started reviewing on behalf of Sam Beveridge (00salmon) February 20, 2026 21:05 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Sam Beveridge (00salmon) added 2 commits February 20, 2026 13:09

Merge branch 'master' into widget-load

516546e

Merge branch 'widget-improvements' into widget-load

bfdc903

Copilot AI review requested due to automatic review settings February 20, 2026 21:12

Copilot started reviewing on behalf of Sam Beveridge (00salmon) February 20, 2026 21:12 View session

github-advanced-security bot found potential problems Feb 20, 2026

View reviewed changes

packages/mint-components/src/index.html

c["_" + a].ready.push(b);

}),

(e = document.createElement("script")),

(e.async = 1),

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded using unencrypted connection.

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Widget load improvements#479

Widget load improvements#479
Sam Beveridge (00salmon) wants to merge 19 commits intomasterfrom
widget-load

Sam Beveridge (00salmon) commented Feb 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Check warning

Copilot AI left a comment

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Copilot AI Feb 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,51 @@
		import { h, Component, State, Prop, Host } from "@stencil/core";

-  globalScript: "src/global/global.ts",
+  globalScript: "src/global/global.ts",
+  // Note: We explicitly disable Stencil's hydration flag for bedrock-components.
+  // This differs from mint-components and is intentional to preserve existing
+  // widget load behavior and DOM markup expectations in consumers.

Comments

Conversation

Sam Beveridge (00salmon) commented Feb 20, 2026

Description of the change

Type of change

Links

Checklists

Development

Paperwork

Code review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Check warning

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants