Loading Overlay

The LoadingOverlay component is a utility component used to display a loading indicator over its child content. It supports customization and a context for managing the loading state globally or locally.

Example

Preview

Content behind the overlay

Code

import { LoadingOverlay } from '@hv/ui/loading-overlay';

export default function LoadingOverlayExample({ isLoading }) {
  return (
    <LoadingOverlay isLoading={isLoading}>
      <div className='bg-muted flex h-60 w-96 flex-col justify-center text-center'>
        Content behind the overlay
      </div>
    </LoadingOverlay>
  );
}

Props

Use theicon above to preview

LoadingOverlay Props

Property	Description	Values
isLoading	Determines whether the loading overlay is visible.	Boolean
className	Custom CSS classes for styling the overlay container.	String
children	The content over which the overlay is displayed.	ReactNode
props	Additional properties	HTMLDivElement

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.