dynamic

Tuono supports lazy loading through the dynamic function, which uses Suspense and React.lazy to load components lazily with fallback support.

Lazy loading helps reduce the amount of JavaScript required for the initial page render by deferring the loading of components and libraries until they are needed.

It's most effective when deferring content that isn't initially visible, like a component below the fold or one in a modal.

Here is an example using all the exposed options as referenced below.

import { dynamic } from 'tuono'

const LazyComponent = dynamic(() => import('./MyComponent'), {
  ssr: false,
  loading: () => <div>Loading...</div>,
})

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <LazyComponent />
    </div>
  )
}

⚠️ Note that the first argument must be a function that returns a promise (e.g., () => import('./MyComponent')), not a direct call to import('./MyComponent'), which would execute immediately instead of lazily loading.

💡 It’s good practice to ensure that your fallback component matches the dimensions of the actual component. This helps prevent layout shifts and the ugly resizing of modals as their content loads.