CHECKOUT-9513: Hydrate initial state to reduce latency caused by request waterfalls

[davidchin]

What/Why?

This PR leverages the Checkout SDK’s new capability to hydrate CheckoutService with initial state from the server. This eliminates client-side API calls on page load, resulting in faster performance and an improved user experience.

See bigcommerce/checkout-sdk-js#2934

Rollout/Rollback

Revert or turn off CHECKOUT-9388.initial_state_for_checkout_app experiment

Testing

CircleCI

[bcsnyk]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[animesh1987]

Is there a reason why we need to wrap the initial render and hydration calls in requestAnimationFrame?

[davidchin]

The idea is to spread the work across multiple tasks so we don't do too much in a single one, as this could negatively impact Total Blocking Time. Having said that, I notice I'm using two, so I'll look into whether I need both.

[davidchin]

Ok I checked. We do need do break up the task in both places. But I found that requestAnimationFrame is not the most ideal. scheduler.yield (https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/yield) is a better option.

[bc-launchbay]

checkout-js deployed to Integration US
success 20251009012955 by Launchbay

[bc-launchbay]

checkout-js deployed to Staging US
success 20251009012955 by Launchbay

[github-actions]

⚡️ Lighthouse results

🖥️ Desktop:

Category	Score
🟠 Performance	88
🟢 Accessibility	91
🟠 Best practices	78

📱 Mobile:

Category	Score
🟠 Performance	60
🟢 Accessibility	94
🟠 Best practices	78