Next.js Supabase V3 (#463)

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

docs/components/loading-overlay.mdoc

@@ -0,0 +1,96 @@
+---
+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.