7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
97 lines
2.9 KiB
Plaintext
97 lines
2.9 KiB
Plaintext
---
|
|
status: "published"
|
|
label: "Loading Overlay"
|
|
title: "Loading Overlay Component in the Next.js Supabase SaaS kit"
|
|
description: "Learn how to use the Loading Overlay component in the Next.js Supabase SaaS kit"
|
|
order: 3
|
|
---
|
|
|
|
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.
|
|
|
|
{% component path="overlays/loading-overlay" /%}
|
|
|
|
## 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
|
|
|
|
```jsx
|
|
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
|
|
|
|
```jsx
|
|
<LoadingOverlay>
|
|
Please wait while we load your dashboard...
|
|
</LoadingOverlay>
|
|
```
|
|
|
|
### Inline loading indicator
|
|
|
|
```jsx
|
|
<LoadingOverlay fullPage={false} className="h-40">
|
|
Fetching results...
|
|
</LoadingOverlay>
|
|
```
|
|
|
|
### Customized appearance
|
|
|
|
```jsx
|
|
<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.
|