dynamicImport wraps React.lazy-style loading for route segments, tabs, and heavy widgets. It trades a loading flash for smaller initial bundles—critical in dispatch where supervisor and analytics modules can dominate bundle size if eagerly imported.
- Route-level or tab-level boundaries where code is not needed on first paint (analytics dashboards, infrequent admin tools).
- Heavy third-party or chart bundles isolated behind user intent.
- Scenarios where startup time and memory on lower-end operator machines measurably improve.
- Tiny leaf components—static imports simplify stack traces and avoid waterfall churn without measurable win.
- Critical-path UI needed within hundreds of milliseconds of navigation (911 primary consoles)—measure before lazy-loading.
- Shared primitives imported everywhere—dedupe into core chunks instead.
Loading fallbacks should be lightweight (LoadingIndicator, minimal skeleton). Error UI should offer retry and report through the observability pipeline.
Lazy component resolver, suspense boundary host (per app patterns), optional onError hook into logging.
- User-visible error strings belong in
formatMessage; developer details go to logs, not modals, unless internal-only tools.
- Always wire
onError to the error pipeline—silent failures in lazy chunks are hard to diagnose in production.
- Prefetch on hover or “likely next step” when latency complaints arise; balance against mobile data use.
- Do place boundaries at route or major tab edges to align with navigation mental models.
- Do keep fallbacks visually calm—avoid full-screen spinners for small widgets.
- Don’t nest many sequential lazy boundaries without a waterfall strategy—consider preloading siblings.
- Don’t swallow errors in
onError without reporting—users need either recovery or a tracked incident.
- Loading fallbacks should expose polite busy states where appropriate; avoid rapid live region chatter.
- Error recovery controls must be keyboard reachable.
- Error boundary for render errors inside lazy trees.
- Loading indicator for compact loading chrome.
- Engineering docs on bundling and performance in the dispatch app toolchain.
