feat(LoadingPage): add interactive demo mode selector with all loading patterns#63
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the LoadingPage Storybook stories by adding an interactive demo mode selector that allows users to explore all 7 loading patterns from a single interface with comprehensive Storybook controls.
Changes:
- Introduced a
LoadingPageDemowrapper component with ademoModeselector enabling users to switch between 7 different loading pattern demonstrations (default, withProgress, overlay, skeletons, cardSkeletons, dots, progressBarColors) - Converted all stories from render-based to args-based pattern for better Storybook controls integration, with conditional controls that show/hide based on the selected demo mode
- Replaced hardcoded colors with design tokens (bg-card, text-foreground, border-border, bg-background, bg-primary, text-primary-foreground, text-muted-foreground) to support dark mode
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Reset animatedProgress state when switching demo modes to ensure progress animation always starts fresh when entering withProgress mode - Add border-border class for proper light/dark theme support using design tokens (was missing border color specification) - Simplify Save button text - remove verbose '(click to trigger loading)' instruction since Storybook context makes behavior self-evident - Clarify size control description to indicate it only applies to default and withProgress modes where LoadingPage is rendered
Deploying ui with
|
| Latest commit: |
5715fe2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ea2f720a.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-loading-page-updates.ui-6d0.pages.dev |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add overlayTimeoutRef to track pending timeout in overlay demo - Add cleanup useEffect to clear timeout when switching demo modes, preventing state updates on unmounted components - Improve size control description to clarify it only affects default and withProgress modes, add Layout category for better organization
Run npm audit fix to resolve GHSA-7h2j-956f-4vf2 (Uncontrolled Resource Consumption) in @isaacs/brace-expansion 5.0.0
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 2 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
dd comprehensive Storybook controls for LoadingPage component:
Add demoMode selector to switch between 7 loading pattern demos:
Add conditional controls that show/hide based on demo mode:
in 'default' mode since they don't apply to other demos
Replace hardcoded colors with design tokens for dark mode support:
Convert render-based stories to args-based pattern for better
Storybook controls integration
All controls now work properly: size, spinnerSize, indicator, progress,
message, and subMessage respond to user input in real-time.
loading-bar.mov