Loading Overlay

The Loading Overlay is a component to display a spinner while loading data.

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>;

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>;

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS