import-on-interaction

Lazy loading heavy UI components on user click uses dynamic imports to defer non-critical code until interaction occurs. This reduces initial bundle size and improves Time to Interactive by scaffolding facade placeholders while the real module loads.

Dynamic import on interaction is a code splitting pattern that gates expensive modules behind user events like clicks or hovers. It prevents third-party widgets and heavy dependencies from degrading initial render performance.

Import-on-interaction patterns work with Vue and vanilla JavaScript alongside React. The approach provides framework-agnostic guidance for progressive loading, applying dynamic imports to defer feature loads until clicks, hovers, or form inputs happen.

Loading third-party widgets eagerly slows Time to Interactive because heavy dependencies block initial render. Deferring these non-critical UI modules until user interaction with facade placeholders preserves UX and frees up the main thread.

The best way to delay heavy feature loads is combining dynamic imports with facade placeholders. This progressive loading strategy gates expensive modules behind user actions, ensuring only necessary code executes after clicks or hovers.

You should not use lazy loading for dynamic imports when UI components are critical for initial render or required immediately. Deferring above-the-fold content delays Time to Interactive and breaks UX expectations for essential features.