zeekay 56dec4912c feat: Enhanced builder page with loading states and improved UX ...

Implemented comprehensive improvements to builder page:

✅ Loading States:
- Skeleton cards during initial load (8 cards with pulsing animation)
- Per-iframe loading spinners with "Loading preview..." text
- Error states with retry buttons for failed iframes
- Smooth fade-in animations (300ms opacity transition)
- Minimum 200ms display time to prevent flashing

✅ Visual Design:
- Rounded corners (rounded-lg) for modern look
- Subtle shadows (shadow-sm) with hover increase (shadow-lg)
- Smooth hover effects (scale-[1.02], bg-accent/5)
- Better typography (text-base font-semibold for block names)
- Category badges (outline variant)
- Subcategory badges (secondary variant)
- Improved spacing (p-4) and layout

✅ UX Improvements:
- Header loading spinner during block fetch
- Disabled input during loading
- Dynamic count display ("Loading..." vs "X blocks")
- Empty state with clear filter button
- Proper error handling with retry mechanism

✅ Technical:
- Removed lazy loading for eager iframe loading
- Changed from aspect-video to aspect-[4/3]
- Added min-h-[400px] for better previews
- State management per iframe (loaded, error, showContent)
- Proper cleanup with useEffect returns

Note: Iframe content still not rendering - needs investigation of /view/[name] route

2025-11-15 23:39:32 -08:00

54 KiB

1280x720px

Raw Permalink History