feat: better appeal loading mechanism #1841
Conversation
WalkthroughThe pull request introduces a loading state mechanism for the classic appeal context in a web application. A new Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (13)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for kleros-v2-testnet ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kleros-v2-neo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
❌ Deploy Preview for kleros-v2-university failed. Why did it fail? →
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
web/src/hooks/useClassicAppealContext.tsx (1)
78-78: Consider adding error states for better UX.While the loading state is correctly implemented, consider distinguishing between loading and error states when either
disputeormultipliersfails to load.- const isLoading = useMemo(() => isUndefined(dispute) || isUndefined(multipliers), [dispute, multipliers]); + const { isLoading, error } = useMemo(() => ({ + isLoading: isUndefined(dispute) || isUndefined(multipliers), + error: dispute === null || multipliers === null + }), [dispute, multipliers]);web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx (1)
24-32: Consider extracting complex conditional rendering to improve readability.While the loading state handling is correct, the nested ternary operators could be simplified for better maintainability.
- {!isLoading ? ( - loserSideCountdown && loserSideCountdown > 0 ? ( - <StageOne setAmount={setAmount} /> - ) : ( - <StageTwo setAmount={setAmount} /> - ) - ) : ( - <StyledSkeleton /> - )} + {isLoading && <StyledSkeleton />} + {!isLoading && (loserSideCountdown && loserSideCountdown > 0 ? ( + <StageOne setAmount={setAmount} /> + ) : ( + <StageTwo setAmount={setAmount} /> + ))}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/src/hooks/useClassicAppealContext.tsx(5 hunks)web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Redirect rules - kleros-v2-university
- GitHub Check: Redirect rules - kleros-v2-neo
- GitHub Check: Header rules - kleros-v2-university
- GitHub Check: Header rules - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-neo
- GitHub Check: Pages changed - kleros-v2-university
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Redirect rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Header rules - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: Pages changed - kleros-v2-testnet
- GitHub Check: dependency-review
- GitHub Check: SonarCloud
- GitHub Check: Analyze (javascript)
- GitHub Check: contracts-testing
🔇 Additional comments (3)
web/src/hooks/useClassicAppealContext.tsx (2)
19-19: LGTM! Interface update follows TypeScript best practices.The optional boolean property
isLoadingis appropriately added to theICountdownContextinterface.
92-95: LGTM! Context value and dependencies are properly memoized.The context value is correctly memoized with appropriate dependencies.
web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx (1)
20-20: LGTM! Context values are correctly destructured.The
isLoadingstate is properly extracted from the context.
❌ Deploy Preview for kleros-v2-testnet-devtools failed. Why did it fail? →
|
|
Code Climate has analyzed commit b52f642 and detected 6 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
|
PR-Codex overview
This PR enhances the
Optionscomponent by introducing a loading state while fetching countdown data. It updates the context to include anisLoadingflag and modifies the rendering logic to show a loading skeleton when data is being fetched.Detailed summary
isUndefinedinweb/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx.isLoadingto the context inweb/src/hooks/useClassicAppealContext.tsx.Optionscomponent to check forisLoadingbefore rendering countdown stages.StyledSkeletonwhile loading instead of conditionally rendering based onloserSideCountdown.Summary by CodeRabbit
New Features
Improvements