Use the LoadingOverlay
component to display an animated SVG spinner while loading data, while also displaying a message. This is useful for full-page loading states.
Basic Usage
The most basic usage of the LoadingOverlay
component is to display a spinner.
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;
<LoadingOverlay />;
With Message
The LoadingOverlay
component can also display a message.
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;
<LoadingOverlay>
Loading Tasks. Please wait...
</LoadingOverlay>;
Full Page
The LoadingOverlay
component can also be used as a full-page loading overlay.
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;
<LoadingOverlay fullPage>
Loading Tasks. Please wait...
</LoadingOverlay>;
With Logo
The LoadingOverlay
component can also display a logo. The component will use the Logo
component from the ~/core/ui/Logo
module.
import { LoadingOverlay } from `~/core/ui/LoadingOverlay`;
<LoadingOverlay displayLogo fullPage>
Loading Page. Please wait...
</LoadingOverlay>;