fix(web): add loading and empty states across app#338
Merged
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
Contributor
📝 WalkthroughWalkthroughThis PR introduces a unified loading and skeleton component library for consistent UI feedback during async operations, then applies it across auth, admin, public, and catalog pages. The new ChangesLoading & State Component Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/components/ui/brand-loader.tsx`:
- Around line 116-123: The InlineSpinner component currently renders BrandLoader
and an animated spinner which violates the guideline to use skeletons for
data-fetch loading; replace InlineSpinner's implementation so it outputs an
inline skeleton/text-skeleton pattern that matches the eventual content shape
instead of BrandLoader (e.g., a short gray rounded rectangle or animated shimmer
for the text width and optional small avatar/element), keep the component API
(exported name InlineSpinner and its label prop) or rename to InlineSkeleton if
preferred, and remove any direct BrandLoader usage so callers get a skeleton
primitive appropriate for data-fetch loading.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f28a3b5f-582b-4f3e-8332-1d75c5460c1a
📒 Files selected for processing (20)
apps/web/src/app/(admin)/admin/_components/AdminShell.tsxapps/web/src/app/(admin)/admin/disputes/page.tsxapps/web/src/app/(admin)/admin/moderation/page.tsxapps/web/src/app/(admin)/admin/stores/page.tsxapps/web/src/app/(admin)/admin/users/page.tsxapps/web/src/app/(auth)/forgot-password/page.tsxapps/web/src/app/(auth)/login/page.tsxapps/web/src/app/(auth)/register/page.tsxapps/web/src/app/(auth)/verify-email/page.tsxapps/web/src/app/(public)/explore/loading.tsxapps/web/src/app/(public)/stores/[handle]/loading.tsxapps/web/src/app/(public)/stores/loading.tsxapps/web/src/app/(public)/stores/page.tsxapps/web/src/app/(store)/store/products/new/_components/ScreenFourSizeGuidePublish.tsxapps/web/src/app/(store)/store/setup/StoreSetupClient.tsxapps/web/src/app/(store)/store/source/SourceProductsClient.tsxapps/web/src/components/feed/FeedClient.tsxapps/web/src/components/ui/Button.tsxapps/web/src/components/ui/State.tsxapps/web/src/components/ui/brand-loader.tsx
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
1 participant
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.
What does this PR do?
This PR adds reusable loading, empty, error, retry, skeleton, and processing states across priority Twizrr web routes. It improves perceived performance and user clarity during API requests, form submissions, route loading, empty data states, and failed fetches without changing backend behavior.
Type of change
Area affected
How to test this
Checkout the branch and run web checks:
Start the web app
pnpm run dev
Smoke-test priority routes:
/login
/register
/stores
/explore
/store/source
/store/setup
/admin/users
/admin/stores
/admin/disputes
/admin/moderation
Expected result: pages render without crashes, loading/skeleton states appear while data is loading, forms show clear processing labels, empty/error states are polished, and retry states appear when API requests fail.
Pre-commit checklist
console.logleft in production code.envfiles committedanytypes addeddb pushScreenshots
Notes for reviewer
Pages/routes improved:
/stores
Added loading route
Added reusable empty/error/retry states
/explore
Added loading route
Added feed retry state
/store/source
Added reusable empty/error/retry states
Admin pages:
/admin/users
/admin/stores
/admin/disputes
/admin/moderation
Added processing button labels for admin actions
Auth forms:
Improved submission labels such as Signing in...
Store/product flows:
Store setup has clearer creating/submitting labels
Product publish/save draft has clearer processing labels
Audit findings:
Many shopper/store order/profile/cart/settings pages already had skeletons and form loading.
Missing or inconsistent states were found in:
/stores
route-level loading for /explore
shared empty/error/retry UI
admin action processing labels
auth form loading copy
source-products empty/error retry polish
product publish button processing labels
Branded loading follow-up
Additional commit:
72c68d9Added official Twizrr mark-based loading components using:
apps/web/public/logo/mark.svg/logo/mark.svgNew loading system:
apps/web/src/components/ui/brand-loader.tsxExports:
BrandLoaderPageLoadingStateSectionLoadingStateButtonLoadingContentInlineSpinnerCardSkeletonTableSkeletonStoreCardSkeletonProductCardSkeletonFeedSkeletonUsage updates:
/storesloading states use branded/skeleton states/exploreloading states use branded/skeleton states/stores/[handle]loading states use branded/skeleton statesValidation after branded loader follow-up:
cd apps/web && pnpm run lintpassedcd apps/web && npx tsc --noEmitpassedcd apps/web && pnpm run buildpassedcd apps/web && pnpm run devbooted successfully//login/register/stores/explore/stores/test-handle/store/setup/admin/dashboardRuntime note:
next devafternext buildbriefly served stale.nextchunks locally.Summary by CodeRabbit
New Features
Improvements