fix(crowdfunding): add error, empty, and skeleton loading states (#521)#609
fix(crowdfunding): add error, empty, and skeleton loading states (#521)#609prem22k wants to merge 1 commit into
Conversation
|
@prem22k is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthrough
ChangesCrowdfunding Dashboard Error Handling and Empty States
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 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 unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed due to a network error. 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}
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 `@app/me/crowdfunding/page.tsx`:
- Around line 42-44: In the catch block, replace the `err: any` type annotation
with `err: unknown`. Then use an `instanceof` check to safely narrow the type
before accessing the `message` property. Check if the caught error is an
instance of `Error` using `instanceof Error`, and only then access
`err.message`; otherwise, provide a fallback error message. This ensures type
safety while maintaining the existing error handling logic in the setError call.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 32c294a8-8831-498b-8de4-02d61961b351
📒 Files selected for processing (2)
app/me/crowdfunding/page.tsxcomponents/crowdfunding-data-table.tsx
| } catch (err: any) { | ||
| console.error('Failed to fetch crowdfunding campaigns:', err); | ||
| setError(err.message || 'Failed to load campaigns. Please try again.'); |
There was a problem hiding this comment.
Avoid any type; use unknown for caught errors.
The coding guidelines prohibit use of any. Narrow the unknown type with an instanceof check to safely extract the error message.
Proposed fix
- } catch (err: any) {
+ } catch (err: unknown) {
console.error('Failed to fetch crowdfunding campaigns:', err);
- setError(err.message || 'Failed to load campaigns. Please try again.');
+ setError(
+ err instanceof Error
+ ? err.message
+ : 'Failed to load campaigns. Please try again.'
+ );📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } catch (err: any) { | |
| console.error('Failed to fetch crowdfunding campaigns:', err); | |
| setError(err.message || 'Failed to load campaigns. Please try again.'); | |
| } catch (err: unknown) { | |
| console.error('Failed to fetch crowdfunding campaigns:', err); | |
| setError( | |
| err instanceof Error | |
| ? err.message | |
| : 'Failed to load campaigns. Please try again.' | |
| ); |
🤖 Prompt for 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.
In `@app/me/crowdfunding/page.tsx` around lines 42 - 44, In the catch block,
replace the `err: any` type annotation with `err: unknown`. Then use an
`instanceof` check to safely narrow the type before accessing the `message`
property. Check if the caught error is an instance of `Error` using `instanceof
Error`, and only then access `err.message`; otherwise, provide a fallback error
message. This ensures type safety while maintaining the existing error handling
logic in the setError call.
Source: Coding guidelines
Description
This PR resolves #521 by properly implementing error handling, loading skeletons, and an empty state for the Crowdfunding dashboard (
/me/crowdfunding).Changes Made:
<LoadingSpinner>frompage.tsxthat was causing the layout (header) to jump. The table now dynamically renders a robust<Skeleton>grid across all visible columns while fetching.<EmptyState>component, complete with the illustration and CTA button linking to/projects/create(as per the acceptance criteria).catch {}block. If the API fails on the initial load, it now displays a full-page Error UI with a "Try Again" button. If the API fails during pagination (and cached data exists), it displays an inline<Alert>above the table to preserve the user's current view.Screenshots
Before (Buggy State):
After (New Empty State):
After (Skeleton Loading State):
Testing Instructions
.env.localconfigured.npm run devand navigate to/me/crowdfunding.Closes #521
Summary by CodeRabbit
Release Notes