Function LoadingBackdrop

LoadingBackdrop(props: LoadingBackdropProps): Element

A full-screen loading overlay component with a spinning benzene molecule 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) {
  const supplierCount = props.supplierResultsCount;
  const supplierLabel = supplierCount === 1 ? "supplier" : "suppliers";
  const supplierSuffix = supplierCount > 0 ? ` from ${supplierCount} ${supplierLabel}` : "";

  return (
    <>
      <Backdrop open={props.open} id="loading-backdrop" role="status" aria-label="search loading">
        <Box className={styles["loading-backdrop-box"]}>
          {/*<Box className={styles['spinner-box']}>
            <IconSpinner>
              <BlueBenzeneIcon sx={{ width: 100, height: 100 }} />
            </IconSpinner>
          </Box>*/}
          <Button className={styles["status-button"]} onClick={props.onClick}>
            {props.resultCount === 0
              ? "Loading..."
              : `Found ${props.resultCount} results${supplierSuffix}...`}
          </Button>
        </Box>
      </Backdrop>
    </>
  );
}