> For the complete documentation index, see [llms.txt](https://cansahin.gitbook.io/react-boilerplate-cra-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cansahin.gitbook.io/react-boilerplate-cra-template/building-blocks/async-components.md).

# Async Components

To load a component asynchronously, create a `Loadable` file by hand or via component generator with the 'Do you want to load resources asynchronously?' option activated.

This is the content of the file by default:

## `Loadable.tsx`

```typescript
import { lazyLoad } from 'utils/loadable';

export const HomePage = lazyLoad(
  () => import('./index'),
  module => module.HomePage, // Select your exported HomePage function for lazy loading
);
```

In this case, the app won't show anything while loading your component. You can, however, make it display a custom loader with:

```typescript
import React from 'react';
import { lazyLoad } from 'utils/loadable';

export const HomePage = lazyLoad(
  () => import('./index'),
  module => module.HomePage,
  {
    fallback: <div>Loading...</div>,
  }
);
```

Make sure to rename your `Loadable.ts` file to `Loadable.tsx`. This feature is built into the boilerplate using React's `lazy` and `Suspense` features.