The Problem
When rendering the Banner component from @shopify/ui-extensions-react/customer-account in a Customer Account UI Extension, the browser becomes extremely laggy and often freezes for several seconds to even minutes before the view finally appears. Removing the Banner immediately resolves the performance issue.
This behavior occurs only with the Banner component, and only in Google Chrome or other Chromium browsers like Edge.
Code to Reproduce
import { Banner, reactExtension } from "@shopify/ui-extensions-react/customer-account";
export default reactExtension("customer-account.order-index.block.render", () => <Extension />);
function Extension() {
return <Banner>I'm broken in Chrome and break everything in the screen</Banner>;
}
I created a full repo for reproduction as well here:
Expected Behavior
- Rendering a single
Bannershould be lightweight and responsive. - No significant main-thread stalls or long layout recalculations.
- The UI should remain smooth and interactive after the
Bannermounts.
Actual Behavior
- In Chromium browsers, rendering even a single
Bannercauses heavy lag or complete freezing for several seconds.
Investigation
- Issue is isolated to the
Bannercomponent and only reproducible in Chrome. - Happens regardless of:
status(info,warning,critical,success)- Presence of
title,onDismiss, oractions - Static or dynamic content
Tested in the following browsers:
- Chrome - Version 142.0.7444.135 (Official Build) (64-bit) - Windows 11
v26.0.1 - Chrome - Version 144.0.7500.5 (Official Build) dev (64-bit) Windows 11
- Chrome - Version 141.0.7390.123 (Official Build) (arm64) - Mac m4 Max
- Edge - Version 142.0.3595.53 (Official build) (64-bit) - Windows 11
Impact
This bug makes the Banner component effectively unusable in Customer Account extensions when running in Chromium browsers. The performance freeze severely degrades the user experience and can appear as a full browser lock-up, forcing developers to remove or replace it entirely.
Request
Please investigate the Banner and other components that might be suffering form the same issue of rendering behavior in Chromium for Customer Account UI Extensions.
It likely triggers a render-measure loop or excessive style recalculation specific to Chrome’s layout engine.
