Skip to main content

Loader

Loader in Storybook

Examples​

Check out the Usage section for details about how to design a loader or inline loader properly, and the different configuration options we provide.

Basic loader​

A basic loader displays a Guidewire branded animation instead of its children until they are ready to be shown.


<Loader>
    <span>Incoming content</span>
</Loader>

There are two ways to show the children of this component:

  1. Change the loaded property to true.
  2. If the loaded property is a Promise, it will automatically update when the promise's asynchronous operation completes.

Custom loader animation​

You can use the renderLoader property to define a custom loader instead of the default loader. This property is a function that returns any React element, it could be as simple as the text shown in the example or more complex animation like the default loader displays.


function CustomLoader() {
        return (
            <span>Custom loading message.</span>
        )
    }

<Loader 
  renderLoader={CustomLoader}
  >
    <span>Incoming content</span>
  </Loader>

Basic inline loader​

An inline loader is a component that states whether content is currently loading. A basic inline loader will display a default icon when the content is loading, and nothing at all when the content is not loading.

<InlineLoader
    loading={loadingStatus} // true, false, or Promise
/>

There are two ways to change the component between its loading and not loading versions:

  1. If the loading property is a Boolean, it will display the default loading icon when this property's value is true.
  2. If the loading property is a Promise, it will initially show the default loading icon but automatically update when the promise's asynchronous operation completes.

Inline loader with custom messaging​

You can use the the successMessage and loadingMessage properties to add custom text to the inline loader component. When there is a success message, it will also show this text next to a check mark icon.

<InlineLoader
    loading={loadingStatus} // true, false, or Promise
    loadingMessage="Loading..."
    successMessage="Success!"
/>

Inline loader with custom icon​

You can use the the loadingIcon and successIcon properties to add custom icons to the inline loader component's messaging. Note that, as stated previously, there needs to be also be a success message for any content to be displayed when loading is complete.

<InlineLoader
    loading={loadingStatus} // true, false, or Promise
    loadingMessage="Loading..."
    successMessage="Success!"
    loadingIcon={ SearchIcon }
    successIcon={ StarIcon }
/>