Loading Overlay

import { LoadingOverlayDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.LoadingOverlay);

Usage

LoadingOverlay renders an overlay with a loader over the parent element with relative position. It is usually used to indicate the loading state of forms. Note that elements under the overlay are still focusable with the keyboard, so remember to add additional logic to handle this case.

The LoadingOverlay rendering is controlled by the visible prop:

<Demo data={LoadingOverlayDemos.usage} />

Loader props

You can pass props down to the Loader component with loaderProps:

<Demo data={LoadingOverlayDemos.loaderProps} />

Custom inline loaders

To replace the default loader with any custom content, set loaderProps={{ children: <div>Your content</div> }}. You can put any React node inside loaderProps.children:

<Demo data={LoadingOverlayDemos.customLoader} />