Loading Overlay Component in the Next.js Supabase SaaS kit

The LoadingOverlay component is a versatile UI element designed to display a loading state with a spinner and optional content. It's perfect for indicating background processes or page loads in your application.

Features

• Customizable appearance through CSS classes
• Option for full-page overlay or inline loading indicator
• Spinner animation with customizable styling
• Ability to include additional content or messages

Usage

import { LoadingOverlay } from '@kit/ui/loading-overlay';
function MyComponent() {
  return (
    <LoadingOverlay>
      Loading your content...
    </LoadingOverlay>
  );
}

Props

The LoadingOverlay component accepts the following props:

• children?: React.ReactNode: Optional content to display below the spinner.
• className?: string: Additional CSS classes to apply to the container.
• spinnerClassName?: string: CSS classes to apply to the spinner component.
• fullPage?: boolean: Whether to display as a full-page overlay. Defaults to true.

Examples

Full-page overlay

<LoadingOverlay>
  Please wait while we load your dashboard...
</LoadingOverlay>

Inline loading indicator

<LoadingOverlay fullPage={false} className="h-40">
  Fetching results...
</LoadingOverlay>

Customized appearance

<LoadingOverlay
  className="bg-gray-800 text-white"
  spinnerClassName="text-blue-500"
>
  Processing your request...
</LoadingOverlay>

Styling

The LoadingOverlay uses Tailwind CSS for styling. Key classes include:

• Flex layout with centered content: flex flex-col items-center justify-center
• Space between spinner and content: space-y-4
• Full-page overlay (when fullPage is true):

fixed left-0 top-0 z-[100] h-screen w-screen bg-background

You can further customize the appearance by passing additional classes through the className and spinnerClassName props.

Accessibility

When using the LoadingOverlay, consider adding appropriate ARIA attributes to improve accessibility, such as aria-busy="true" on the parent element that's in a loading state.

Best Practices

1. Use full-page overlays sparingly to avoid disrupting user experience.
2. Provide clear, concise messages to inform users about what's loading.
3. Consider using inline loading indicators for smaller UI elements or partial page updates.
4. Ensure sufficient contrast between the overlay and the spinner for visibility.

The LoadingOverlay component provides a simple yet effective way to indicate loading states in your application, enhancing user experience by providing visual feedback during asynchronous operations or content loads.