React.lazy, Suspense and the Hidden 300 ms Delay

A new tab extension displays widgets lazily using React.lazy, causing noticeable delays in content appearing. Initially, it was assumed that the bundle was too large, but the real culprit was not the bundle size but React's behavior. When a lazy component is rendered for the first time, it suspends, showing a placeholder until the component is ready.

React also throttles the visibility of suspended content, waiting 300ms before revealing it. This combination caused widgets to appear with a 300ms delay, regardless of how quickly the code loaded. The extension's dashboard had redundant code for certain widgets, which was removed, reducing the startup file size by about 100KB. However, this did not significantly impact the delay.

Profiling in headless Chromium revealed that the delay came from the lazy component suspending and React's throttling of content visibility. Preloading the widgets for the page that opened did not help much, as the delay remained. The fix involved manually triggering the lazy component's import before React rendered it, bypassing the suspension.

This required creating a utility function and testing to ensure the fix remained effective if React's implementation changed. The throttle setting in React cannot be adjusted, so the preloadLazy function proved to be the key to reducing widget loading times.