Skip to content

feat: implement LoadingState components #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jun 7, 2025
Merged

feat: implement LoadingState components #97

merged 2 commits into from
Jun 7, 2025

Conversation

nullcoder
Copy link
Owner

Summary

  • Implement LoadingState component with skeleton, spinner, and progress variants for consistent loading indicators across the application
  • Add EditorSkeleton specifically for code editor loading states
  • Include useDelayedLoading hook to prevent loading state flashing for quick operations

Changes

  • ✨ Create LoadingState component with three variants:
    • skeleton: Generic content skeleton using shadcn/ui Skeleton
    • spinner: Animated spinner with customizable message
    • progress: Progress bar for file processing operations
  • 🎨 Add EditorSkeleton component that mimics the code editor UI structure
  • 🔧 Implement useDelayedLoading hook that only shows loading after a delay threshold
  • 📱 Support fullscreen overlay mode for blocking operations
  • ♿ Add proper ARIA attributes for accessibility (role="status", progressbar, aria-live)
  • 🧪 Add comprehensive tests for all components
  • 📚 Create demo page showcasing all loading state variants

Test Plan

  • All unit tests pass
  • Demo page works correctly at /demo/loading-states
  • Loading states have smooth animations
  • Progress bar clamps values between 0-100
  • Delayed loading hook prevents flashing
  • Accessibility attributes are properly set
  • TypeScript types are correct

Closes #67

🤖 Generated with Claude Code

@nullcoder
feat: implement LoadingState components (#67)
4c5aaff 
- Add LoadingState component with skeleton, spinner, and progress variants
- Implement EditorSkeleton for code editor loading states
- Create LoadingSpinner with customizable messages
- Add LoadingProgress for file processing operations
- Include useDelayedLoading hook to prevent loading state flashing
- Add comprehensive tests and demo page
- Support fullscreen overlays for blocking operations
- Implement proper ARIA attributes for accessibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <claude@ghostpaste.dev>
@cloudflare-workers-and-pages Cloudflare Workers and Pages
Copy link

cloudflare-workers-and-pages bot commented Jun 7, 2025 •
edited
Loading

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs		 ghostpaste d6945a8 Visit preview Jun 07 2025, 04:30 PM

@nullcoder nullcoder merged commit 346acab into main Jun 7, 2025
1 check was pending
@nullcoder nullcoder deleted the feat/loading-states branch June 7, 2025 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feat: create loading state components
1 participant
@nullcoder