Skip to content

Commit 14fd905

Browse files
committed
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.
1 parent 419cd67 commit 14fd905

3 files changed

Lines changed: 46 additions & 6 deletions

File tree

demo/src/components/playground/ComponentPlayground.tsx

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { CodeBlock } from '../common/CodeBlock';
1010
import { ThemeSwitch } from '../common/ThemeSwitch';
1111
import { useTheme, THEME_COLORS } from '../../contexts/ThemeContext';
1212
import { generateComponentCode, generateImportStatement } from '../../utils/codeGenerator';
13+
import { SpinnerCircle } from '@lib/components';
1314

1415
interface ComponentPlaygroundProps {
1516
metadata: ComponentMetadata;
@@ -56,7 +57,18 @@ function App() {
5657
className="preview-area"
5758
style={{ backgroundColor: THEME_COLORS[theme] }}
5859
>
59-
<ComponentToRender {...props} />
60+
{metadata.id === 'loader-overlay' ? (
61+
<ComponentToRender
62+
{...props}
63+
loader={props.loader || <SpinnerCircle size={40} color="#3b82f6" />}
64+
>
65+
<div className="p-12 text-center text-gray-500 font-medium">
66+
Your content here
67+
</div>
68+
</ComponentToRender>
69+
) : (
70+
<ComponentToRender {...props} />
71+
)}
6072
</div>
6173
</div>
6274

@@ -162,8 +174,22 @@ function App() {
162174
className="p-4 border rounded-lg hover:bg-gray-50 transition-colors text-left"
163175
>
164176
<div className="font-medium text-sm mb-2">{example.name}</div>
165-
<div className="flex items-center justify-center p-3 bg-gray-100 rounded">
166-
<ComponentToRender {...metadata.defaultProps} {...example.props} />
177+
<div className="flex items-center justify-center p-3 bg-gray-100 rounded relative">
178+
{metadata.id === 'loader-overlay' ? (
179+
<ComponentToRender
180+
{...metadata.defaultProps}
181+
{...example.props}
182+
loading={true}
183+
position="absolute"
184+
loader={<SpinnerCircle size={32} color="#3b82f6" />}
185+
>
186+
<div className="p-6 text-center text-gray-500 text-sm">
187+
Content
188+
</div>
189+
</ComponentToRender>
190+
) : (
191+
<ComponentToRender {...metadata.defaultProps} {...example.props} />
192+
)}
167193
</div>
168194
</button>
169195
))}

demo/src/data/components.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1134,7 +1134,7 @@ export const COMPONENTS: ComponentMetadata[] = [
11341134
component: LoaderOverlay,
11351135
description: 'Overlay wrapper for displaying loaders over content with backdrop',
11361136
defaultProps: {
1137-
loading: true,
1137+
loading: false,
11381138
position: 'fixed',
11391139
backdropOpacity: 0.5,
11401140
backdropColor: '#000000',

demo/src/pages/Gallery.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { SEO } from '../components/common/SEO';
55
import { StructuredData } from '../components/common/StructuredData';
66
import { gallerySEO } from '../utils/seo';
77
import { websiteSchema } from '../utils/structuredData';
8+
import { SpinnerCircle } from '@lib/components';
89

910
export function Gallery() {
1011
return (
@@ -39,8 +40,21 @@ export function Gallery() {
3940
{component.name}
4041
</h3>
4142
<p className="text-sm text-gray-600 mb-4">{component.description}</p>
42-
<div className="flex items-center justify-center p-6 bg-gray-50 rounded">
43-
<Component {...component.defaultProps} />
43+
<div className="flex items-center justify-center p-6 bg-gray-50 rounded relative">
44+
{component.id === 'loader-overlay' ? (
45+
<Component
46+
{...component.defaultProps}
47+
loading={true}
48+
position="absolute"
49+
loader={<SpinnerCircle size={40} color="#3b82f6" />}
50+
>
51+
<div className="p-8 text-center text-gray-500">
52+
Your content here
53+
</div>
54+
</Component>
55+
) : (
56+
<Component {...component.defaultProps} />
57+
)}
4458
</div>
4559
</Link>
4660
);

0 commit comments

Comments
 (0)