React.lazy, Suspense and the Hidden 300 ms Delay

A React 19 new-tab dashboard loads each widget as a separate React.lazy chunk, with a Suspense placeholder shown while the code loads. Because browser extensions load files locally, reducing startup JavaScript - including removing about 100 KB of unused modal code and shrinking the main bundle - did not make widgets appear sooner. Profiling instead showed scripts ready within roughly 100 milliseconds, while widgets remained hidden until around 380 milliseconds. The delay came from two React behaviors: a lazy component suspends on its first render even if its code is already available, and React throttles the reveal of suspended content for 300 milliseconds after a fallback appears. This makes quickly loaded widgets wait and causes them to appear in batches.

Preloading lazy components before the first render reduced the observed wait to about 95 milliseconds, but required a capped startup pause and could still delay widgets that loaded slowly. The more reliable fix avoids suspending for widget code: widgets show their normal placeholder as ordinary content, then switch to the real component when loading finishes. This bypasses the reveal throttle, letting widgets appear as soon as their code is ready; the first widget appeared about 240 milliseconds sooner, and most of the dashboard about 200 milliseconds sooner in a Windows Chrome test. The approach preserves Suspense and error boundaries for failures, but relies on React’s private lazy-component fields, so the implementation isolates and tests that access and falls back to normal behavior if those fields change. Widgets now appear individually rather than in a batch.