Component API

Loading Indicator

When content is loading, the LoadingIndicator component can be used to communicate to users that the wait is expected and everything is normal.

Basic Usage

By default, the Loading Indicator uses the Spinner component.

import React from 'react';
import { LoadingIndicator } from 'react-magma-dom';
export function Example() {
  return <LoadingIndicator />;
}

Progress Bar

The type prop can be used to change what sort of loading animation displays. The default type is spinner, but the progressbar type can also be used, to render the Progress Bar component.

Please be patient as this could take up to a minute to load.

import React from 'react';
import { LoadingIndicator } from 'react-magma-dom';
export function Example() {
  const [percentage, setPercentage] = React.useState(0);

  React.useEffect(() => {
    const timer1 = setTimeout(() => {
      setPercentage(10);
    }, 2000);

    const timer2 = setTimeout(() => {
      setPercentage(20);
    }, 4000);

    const timer3 = setTimeout(() => {
      setPercentage(30);
    }, 6000);

    const timer4 = setTimeout(() => {
      setPercentage(40);
    }, 8000);

    const timer5 = setTimeout(() => {
      setPercentage(50);
    }, 10000);

    const timer6 = setTimeout(() => {
      setPercentage(60);
    }, 12000);

    const timer7 = setTimeout(() => {
      setPercentage(70);
    }, 14000);

    const timer8 = setTimeout(() => {
      setPercentage(80);
    }, 16000);

    const timer9 = setTimeout(() => {
      setPercentage(90);
    }, 18000);

    const timer10 = setTimeout(() => {
      setPercentage(100);
    }, 20000);

    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
      clearTimeout(timer3);
      clearTimeout(timer4);
      clearTimeout(timer5);
      clearTimeout(timer6);
      clearTimeout(timer7);
      clearTimeout(timer8);
      clearTimeout(timer9);
      clearTimeout(timer10);
    };
  }, []);

  return <LoadingIndicator percentage={percentage} type="progressbar" />;
}

Custom Messages

The LoadingIndicator, supports three levels of messages. One displays immediately, the second one appears after five seconds, and the third appears after 15 seconds. These messages can be customized by using the message1, message2 and message3 props.

Custom message

import React from 'react';
import { LoadingIndicator } from 'react-magma-dom';
export function Example() {
  return (
    <LoadingIndicator
      message1="Custom message"
      message2="An additional custom message"
      message3="Third and final custom message"
    />
  );
}

Accessibility Considerations

Loading Indicators are intended to alert users to the fact that wait time is expected, so when a LoadingIndicator component is added to a UI, it is important that screen readers read the new content. One way to do this is to use the Announce component, which employs the aria-live attribute. Be sure to place the conditional logic to display the LoadingIndicator inside the Announce component.

import React from 'react';
import { Announce, Button, LoadingIndicator } from 'react-magma-dom';
export function Example() {
  const [showLoader, setShowLoader] = React.useState(false);

  return (
    <>
      <p>
        <Button onClick={() => setShowLoader(true)}>
          Show Loading Indicator
        </Button>
        <Button onClick={() => setShowLoader(false)}>
          Hide Loading Indicator
        </Button>
      </p>
      <Announce>{showLoader && <LoadingIndicator />}</Announce>
    </>
  );
}

Loading Indicator Props

All of the global HTML attributes can be provided as props will be applied to the internal element. The internal element will be either a div when using the ProgressBar or a span when using the Spinner. Additionally, depending on which component is used internally, you can provide any props that the Spinner or the ProgressBar accepts. This is controlled by the passed in type prop.

= required prop

Property	Type	Default	Description
message1	string	"Loading..."	Message displayed for the first five seconds
message2	string	"Thank you for your patience. Still loading..."	Message displayed for the first five seconds
message3	string	"Sorry for the delay. This is taking longer than expected."	Message displayed after 15 seconds
percentage	number	0	Message displayed for the first five seconds
testId	string	-	Test ID attached to an internal element as `data-testid` for consumer testing
type	enum, one of: `LoadingIndicatorType.progressbar` `LoadingIndicatorType.spinner`	LoadingIndicatorType.spinner	Type of loading indictor to display, can be progress bar or spinner