XLoader

The <XLoader> component indicates a task in progress, serving as a placeholder during loading or blocking interactions during processes like data fetching or form submission, keeping users informed and reducing confusion.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Usage

The <XLoader> should be used to inform users that a process is currently in progress, particularly when it takes more than a second. They are useful for situations like data fetching, form submissions, or page loads, where visual feedback reassures users that their action is being processed. However, avoid showing a loading indicator for very brief tasks, as it can feel disruptive.

Fullscreen

A fullscreen loader blocks all interactions with the underlying content, preventing users from interacting with any part of the page until the operation is finished. This can be useful in scenarios such as waiting for critical data to load during the initial app startup, processing a sensitive transaction, or handling an essential authentication step.

However, overuse of fullscreen loaders can lead to a frustrating user experience, so they should be reserved for situations where it's necessary to ensure users can't proceed until the task is fully complete.

Section

A section loader is used to indicate that a specific section of the page is currently processing or loading data. Unlike a fullscreen loader, it only blocks interaction with that section, allowing users to continue interacting with other parts of the page.

Use section loaders for non-blocking tasks, like loading a list of items. They should ideally not cause layout shifts, ensuring the rest of the page remains stable while the content is being loaded, providing a seamless experience for the user.

Props

string;

string;

string;

string;

ReactNode;

string;

"fullscreen" | "section";

"undefined"

Related