Function LoadingBackdrop

LoadingBackdrop(props: LoadingBackdropProps): Element

A full-screen loading overlay component with a spinning cubane loader graphic and stop button. The spinner has a delayed fade-in animation when the backdrop is opened.

Parameters

props: LoadingBackdropProps
Component properties containing:
- open: Controls the visibility of the backdrop
- onClick: Callback function triggered when the stop button is clicked

Returns Element

A loading backdrop component

Example

<LoadingBackdrop
  open={isLoading}
  onClick={handleStopLoading}
/>

Future improvements:

Implement a Suspense component instead of manual loading state
Add a timer to show the Stop Search button after a delay

Source

export default function LoadingBackdrop(props: LoadingBackdropProps) {
  return (
    <>
      <Backdrop
        open={props.open}
        id="loading-backdrop"
        role="status"
        aria-label={i18n('loading_aria')}
      >
        <Box className={styles['loading-backdrop-box']}>
          <Box className={styles['spinner-stack']}>
            <Box className={styles['spinner-box']}>
              <IconSpinner>
                <img
                  src="/static/images/cubane-loader-noh-thick-blue-320px.png"
                  width={128}
                  height={128}
                  alt=""
                />
              </IconSpinner>
            </Box>
            <span className={styles['status-text']}>{formatResultsText(props)}</span>
          </Box>
          <Button
            className={styles['abort-button']}
            onClick={props.onClick}
            disabled={props.isAborting}
          >
            {i18n('loading_cancel')}
          </Button>
        </Box>
      </Backdrop>
    </>
  );
}