LoadingOverlay

Usage

Use LoadingOverlay to overlay element to disable interactions and indicate loading state. Note that elements under overlay are still focusable with keyboard. Remember to add additional logic to handle this case.

Overlay had absolute position and will take 100% of width and height of nearest parent container with relative position. Use it when you need to disable user interactions and indicate loading state, for example, while form is submitting.

visible is the only required prop, if it set to false component will not render anything.

import React, { useState } from 'react';
import { LoadingOverlay, Button, Group } from '@mantine/core';

function Demo() {
  const [visible, setVisible] = useState(false);

  // Note that position: relative is required
  return (
    <>
      <div style={{ width: 400, position: 'relative' }}>
        <LoadingOverlay visible={visible} />
        <AuthenticationForm />
      </div>

      <Group position="center">
        <Button onClick={() => setVisible((v) => !v)}>Toggle overlay</Button>
      </Group>
    </>
  );
}

Transition duration

You can change appear and disappear animations duration by passing transitionDuration prop:

// 500ms animations
<LoadingOverlay transitionDuration={500} />

// disable animations
<LoadingOverlay transitionDuration={0} />

Loader and Overlay props

LoadingOverlay is built using Overlay and Loader components. You can change all props of Loader component, opacity and color of Overlay:

<LoadingOverlay
  loaderProps={{ size: 'sm', color: 'pink', variant: 'bars' }}
  overlayOpacity={0.3}
  overlayColor="#c5c5c5"
/>

Configure default loader

You can configure default loader in MantineProvider, it will be used in Loader and LoadingOverlay components by default:

// Loader component will render bars
<MantineProvider theme={{ loader: 'bars' }}>
  <YourApp />
</MantineProvider>

Custom loader

You can use any other loader with LoadingOverlay by setting loader prop:

<LoadingOverlay loader={<YourLoader />} />