fix(demo): Fix LoaderOverlay rendering in Gallery and Playground

Fix LoaderOverlay component display issues where it was blocking the entire page:
- Set default loading state to false in component metadata
- Add children content wrapper for proper overlay demonstration
- Use absolute positioning in Gallery cards to scope overlay to card area
- Add SpinnerCircle loader prop for visual demonstration
- Import SpinnerCircle in Gallery and Playground components

This prevents the full-screen overlay from blocking the gallery page while still demonstrating the component's functionality correctly.

Author: ishansasika

demo/src/components/playground/ComponentPlayground.tsx

@@ -10,6 +10,7 @@ import { CodeBlock } from '../common/CodeBlock';
 import { ThemeSwitch } from '../common/ThemeSwitch';
 import { useTheme, THEME_COLORS } from '../../contexts/ThemeContext';
 import { generateComponentCode, generateImportStatement } from '../../utils/codeGenerator';
+import { SpinnerCircle } from '@lib/components';
 
 interface ComponentPlaygroundProps {
   metadata: ComponentMetadata;
@@ -56,7 +57,18 @@ function App() {
           className="preview-area"
           style={{ backgroundColor: THEME_COLORS[theme] }}
         >
-          <ComponentToRender {...props} />
+          {metadata.id === 'loader-overlay' ? (
+            <ComponentToRender
+              {...props}
+              loader={props.loader || <SpinnerCircle size={40} color="#3b82f6" />}
+            >
+              <div className="p-12 text-center text-gray-500 font-medium">
+                Your content here
+              </div>
+            </ComponentToRender>
+          ) : (
+            <ComponentToRender {...props} />
+          )}
         </div>
       </div>
 
@@ -162,8 +174,22 @@ function App() {
                 className="p-4 border rounded-lg hover:bg-gray-50 transition-colors text-left"
               >
                 <div className="font-medium text-sm mb-2">{example.name}</div>
-                <div className="flex items-center justify-center p-3 bg-gray-100 rounded">
-                  <ComponentToRender {...metadata.defaultProps} {...example.props} />
+                <div className="flex items-center justify-center p-3 bg-gray-100 rounded relative">
+                  {metadata.id === 'loader-overlay' ? (
+                    <ComponentToRender
+                      {...metadata.defaultProps}
+                      {...example.props}
+                      loading={true}
+                      position="absolute"
+                      loader={<SpinnerCircle size={32} color="#3b82f6" />}
+                    >
+                      <div className="p-6 text-center text-gray-500 text-sm">
+                        Content
+                      </div>
+                    </ComponentToRender>
+                  ) : (
+                    <ComponentToRender {...metadata.defaultProps} {...example.props} />
+                  )}
                 </div>
               </button>
             ))}

demo/src/data/components.ts

@@ -1134,7 +1134,7 @@ export const COMPONENTS: ComponentMetadata[] = [
     component: LoaderOverlay,
     description: 'Overlay wrapper for displaying loaders over content with backdrop',
     defaultProps: {
-      loading: true,
+      loading: false,
       position: 'fixed',
       backdropOpacity: 0.5,
       backdropColor: '#000000',

demo/src/pages/Gallery.tsx

@@ -5,6 +5,7 @@ import { SEO } from '../components/common/SEO';
 import { StructuredData } from '../components/common/StructuredData';
 import { gallerySEO } from '../utils/seo';
 import { websiteSchema } from '../utils/structuredData';
+import { SpinnerCircle } from '@lib/components';
 
 export function Gallery() {
   return (
@@ -39,8 +40,21 @@ export function Gallery() {
                         {component.name}
                       </h3>
                       <p className="text-sm text-gray-600 mb-4">{component.description}</p>
-                      <div className="flex items-center justify-center p-6 bg-gray-50 rounded">
-                        <Component {...component.defaultProps} />
+                      <div className="flex items-center justify-center p-6 bg-gray-50 rounded relative">
+                        {component.id === 'loader-overlay' ? (
+                          <Component
+                            {...component.defaultProps}
+                            loading={true}
+                            position="absolute"
+                            loader={<SpinnerCircle size={40} color="#3b82f6" />}
+                          >
+                            <div className="p-8 text-center text-gray-500">
+                              Your content here
+                            </div>
+                          </Component>
+                        ) : (
+                          <Component {...component.defaultProps} />
+                        )}
                       </div>
                     </Link>
                   );