Dynamic Importer

Usage

Overview

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.

When to use

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.

When not to use

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.

Variants

Loading fallbacks should be lightweight (LoadingIndicator, minimal skeleton). Error UI should offer retry and report through the observability pipeline.

Anatomy

Lazy component resolver, suspense boundary host (per app patterns), optional onError hook into logging.

Content guidelines

User-visible error strings belong in formatMessage; developer details go to logs, not modals, unless internal-only tools.

Behavior and states

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.

Best practices

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.

Accessibility

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.

Drop Target / Accessibility

Dynamic Importer / API and Development

On this page

Dynamic Importer

Usage

Overview

When to use

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.

When not to use

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.

Variants

Loading fallbacks should be lightweight (LoadingIndicator, minimal skeleton). Error UI should offer retry and report through the observability pipeline.

Anatomy

Lazy component resolver, suspense boundary host (per app patterns), optional onError hook into logging.

Content guidelines

User-visible error strings belong in formatMessage; developer details go to logs, not modals, unless internal-only tools.

Behavior and states

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.

Best practices

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.

Accessibility

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.

Drop Target / Accessibility

Dynamic Importer / API and Development

On this page