Disclaimer: All code examples on this page are not editable but can be copied and pasted into your project.

import { LoadingOverlay } from '@uhg-abyss/web/ui/LoadingOverlay';

loadingTitle

loadingMessage

statusTitle

statusMessage

statusIcon

width

hideIcon

isDismissable

() => {
  const [isLoading, setLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  const { setCountdownTime } = useCountdown({
    onCompleted: () => {
      setLoading(false);
      setIsOpen(true);
    }
  });

  const triggerLoading = () => {
    setLoading(true);
    setCountdownTime(3000);
  };

  const handleClose = () => {
    setIsOpen(false)
  };

  return (
    <LoadingOverlay
      loadingTitle="Please Wait"
      loadingMessage="Retrieving Information."
      ariaLoadingLabel="Example loading ARIA label"
      statusTitle="Status update"
      statusMessage="Sample message..."
      isLoading={isLoading}
      isOpen={isOpen}
      isDismissable
      onClose={handleClose}
    >
      <Card css={{
        'abyss-card-root': {
          height: 300,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '$web.semantic.color.surface.container.tertiary',
        },
      }}>
        <Button onClick={triggerLoading}>
          Open LoadingOverlay
        </Button>
      </Card>
    </LoadingOverlay>
  );
}

Usage

There are two main states to LoadingOverlay: the loading state and the loaded state.

• In the loading state (when isLoading is set to true), a loading spinner will appear on the left, and the loadingTitle and loadingMessage props will be used as the text next to it.
• Once loading has completed (when isLoading is set to false), the display changes: the statusIcon prop is used to create an icon on the left to reflect the application state after the load (ex. an error icon if something went wrong, or a success icon if data was submitted), and the statusTitle and statusMessage props will be used as the text next to it. In this state, the overlay can be closed when the isDismissable prop is set to true.

useOverlay

Using the useOverlay hook allows you to open the overlay and pass data into it.

useState

Use the useState hook to set the open and loading states of the loading overlay.

Loading title

Use the loadingTitle prop to set the title of the loading overlay when it is in the loading state.

Loading message

Use the loadingMessage prop to set the description of the loading overlay when it is in the loading state.

Status title

Use the statusTitle prop to set the title of the loading overlay when loading has completed.

Status message

Use the statusMessage prop to set the description of the loading overlay when loading has completed.

Status icon

Use the statusIcon prop to set the icon that will be displayed when loading has completed. Possible options are success, error, warning, and info. The default is info. You can hide the icon with the hideIcon prop.

isDismissable

Use the isDismissable prop to determine whether the overlay can be closed after loading is complete. Use this prop with the useState hook if there are situations where the user can take another action after dismissing the overlay. The default is false. You may want to set it to false in cases such as when a widget fails to load and cannot be used. The default is false.

isOpen

Use the isOpen prop to set whether the overlay is open or not. Use this prop with the useState hook to change the overlay between open and closed. The default is false.

isLoading

Use the isLoading prop to set whether the overlay is loading or not. Use this prop with the useState hook to set the loading state based on the status of the rest of your application. The default is false.

onClose

Use the onClose prop to set a function that will be executed when the loading overlay is closed.

LoadingOverlay Props

Name	Type	Default	Required	Description
ariaLoadingLabel	string	'Loading'	-	The ariaLoadingLabel of LoadingOverlay component
children	React.ReactNode	-	-	The children of LoadingOverlay component
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hideIcon	boolean	false	-	If true , it hides the icon
isDismissable	boolean	false	-	If true , the overlay is dismisable
isLoading	boolean	false	-	If true , the overlay is loading
isOpen	boolean	false	-	If true , the overlay is opened
loadingIcon	React.ReactNode	-	-	The icon that will be displayed inside LoadingSpinner
loadingMessage	string	-	-	The message that will be displayed when overlay is in loading state
loadingTitle	string	-	-	The title that will be displayed when overlay is in loading state
model	string	-	-	The model of LoadingOverlay component
onClose	() => void	-	-	The onClose function of LoadingOverlay component
statusIcon	"success" | "error" | "warning" | "info"	'info'	-	The icon that will be displayed when loading is completed
statusMessage	string	-	-	The message that will be displayed when loading is completed
statusTitle	string	-	-	The title that will be displayed when loading is completed
width	string | number	'80%'	-	The width of loading dialog

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

LoadingOverlay.types.ts

LoadingOverlay Classes

Class Name	Description
.abyss-loading-overlay-root	LoadingOverlay root element
.abyss-loading-overlay-overlay	LoadingOverlay overlay element
.abyss-loading-overlay-dialog	LoadingOverlay dialog element
.abyss-loading-overlay-close-button	LoadingOverlay close button
.abyss-loading-overlay-close-icon	LoadingOverlay close icon
.abyss-loading-overlay-loading-body	LoadingOverlay loading body
.abyss-loading-overlay-status-icon-wrapper	LoadingOverlay status icon wrapper
.abyss-loading-overlay-loading-content	LoadingOverlay loading content
.abyss-loading-overlay-loading-title	LoadingOverlay loading title
.abyss-loading-overlay-loading-message	LoadingOverlay loading message
.abyss-alert-icon	Alert icon element
.abyss-loading-overlay-status-body	LoadingOverlay status body
.abyss-loading-overlay-status-content	LoadingOverlay status content
.abyss-loading-overlay-status-title	LoadingOverlay status title
.abyss-loading-overlay-status-message	LoadingOverlay status message

Simple LoadingOverlay

A basic LoadingOverlay, when isDismissable = false, is used to indicate to the user that a process is occurring during which time they may not interact with any elements underneath the overlay. The overlay is coded as an Alert, meaning that most screen readers will announce the overlay once it renders. By default, the LoadingOverlay contains no interactive elements

Adheres to the Alert WAI-ARIA design pattern.

The Alert Example provided by W3.org demonstrates the Alert Pattern.

LoadingOverlay Alert Dialog

LoadingOverlay becomes an interactive alert dialog when isDismissable = true. The only interactions are to move focus through, or close the dialog window.

This follows the WAI-ARIA Alert Dialog Example and has limited keyboard interaction to close the overlay using the Close button or Escape.