Enable widget's OnLoadAction to handle storage-bound input bindings and prevent premature rendering

[anserwaseem]

Describe your changes

The issue was a timing race condition between storage initialization and onLoad action execution:

1. Widget mounts → OnLoadAction useEffect fires immediately
2. onLoad action executes → ensemble.storage.get doesn't returns value from storage
3. Meanwhile (asynchronously): sessionStorage → screenStorageAtom gets hydrated
4. Widget properties re-evaluate → onLoad gets correct value from storage

Why Widget Properties Worked But onLoad Didn't

• Widget properties are reactive and update when storage loads
• onLoad action execute once immediately, missing the storage hydration timing

Solution Implemented

1: Storage Timing Fix

Modified OnLoadAction component to wait for storage-bound inputs to be properly evaluated before executing the onLoad action:

2: Prevent Flash of Unwanted Content

Enhanced the solution to prevent children from rendering until onLoad completes, eliminating visual flash:

Technical Flow (After Fix)

1. Widget mounts
2. OnLoadAction detects storage-bound inputs
3. OnLoadAction waits for storage hydration (next tick)
4. OnLoadAction executes onLoad with correct storage data
5. Only THEN do children render
6. User sees final intended state immediately

Impact

• Minimal impact: Only adds setTimeout(..., 0) delay for widgets with storage-bound inputs
• No impact on widgets without storage bindings
• No impact on user interactions or API calls
• Existing widgets without storage bindings work unchanged
• No breaking changes to widget API

Failing Test

    ✕ onLoad action executes after widget inputs are properly evaluated (23 ms)

  ● Custom Widget › onLoad action has access to widget inputs bound to storage

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "userFilters in onLoad:", {"priority": "high", "status": "active"}
    Received
           1
              "userFilters in onLoad:",
            - Object {
            -   "priority": "high",
            -   "status": "active",
            - }
            + Object {},
           2: "userFilters type:", "object"
           3: "userFilters JSON:", "{}"

Screenshots [Optional]

Issue ticket number and link

Closes #1086

Checklist before requesting a review

• I have performed a self-review of my code
• I have added tests
• I have added a changeset pnpm changeset add
• I have added example usage in the kitchen sink app

[changeset-bot]

🦋 Changeset detected

Latest commit: e3ff145

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@ensembleui/react-runtime	Patch
@ensembleui/react-kitchen-sink	Patch
@ensembleui/react-preview	Patch
@ensembleui/react-starter	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Visit the preview URL for this PR (updated for commit e3ff145):

https://react-kitchen-sink-dev--pr1087-1086-widgets-onload-psim3td7.web.app

_{(expires Fri, 18 Jul 2025 12:47:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6267897ade2ba783b6db70a53a60fc3946d625e9}