Full-Page Loading Screen with shadcn/ui

Here's a reusable full-page loading screen component using shadcn/ui components. This overlay will cover the entire page while content is loading.

How It Works

1. The LoadingScreen component creates a fixed overlay that covers the entire viewport with a semi-transparent background and blur effect.

2. It displays:

   • Two skeleton loaders for content placeholders 1
   • Three bouncing dots with staggered animation for a loading indicator
   • A customizable loading message

3. The demo page shows how to:

   • Toggle the loading screen with state
   • Pass a custom message to the loading component
   • Simulate an asynchronous operation with setTimeout

Customization Options

You can customize the loading screen by:

1. Changing the message prop to display different loading text
2. Adjusting the background opacity by modifying the bg-background/80 class
3. Adding or removing skeleton elements based on your content
4. Changing the animation style or colors to match your brand

This component works well for full-page loading states, initial data fetching, or during form submissions.