Fix: Infinite Scroll #2461
Fix: Infinite Scroll #2461
Conversation
WalkthroughThe changes in the Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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
Documentation and Community
|
Our Pull Request Approval ProcessWe have these basic policies to make the approval process smoother for our volunteer team. Testing Your CodePlease make sure your code passes all tests. Our test code coverage system will fail if these conditions occur:
The process helps maintain the overall reliability of the code base and is a prerequisite for getting your PR approved. Assigned reviewers regularly review the PR queue and tend to focus on PRs that are passing. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![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
🧹 Outside diff range and nitpick comments (3)
src/screens/Users/Users.tsx (3)
421-432: Improve loading state managementThe current implementation has multiple loading states that could be consolidated and better managed. Consider these improvements:
- Reset
isLoadingMorein error cases- Simplify loading state management by using a single source of truth
- const [isLoading, setIsLoading] = useState(true); - const [isLoadingMore, setIsLoadingMore] = useState(false); + const [loadingState, setLoadingState] = useState<'idle' | 'loading' | 'loadingMore'>('idle'); useEffect(() => { - if (loading && isLoadingMore == false) { - setIsLoading(true); - } else { - setIsLoading(false); - } + setLoadingState(loading ? (isLoadingMore ? 'loadingMore' : 'loading') : 'idle'); }, [loading]); const loadMoreUsers = async (): Promise<void> => { - setIsLoadingMore(true); + setLoadingState('loadingMore'); try { await fetchMore({ // ... existing config }); } catch (error) { + setLoadingState('idle'); // Handle error } };
421-441: Optimize InfiniteScroll performanceConsider these performance improvements:
- Remove unnecessary istanbul ignore and simplify dataLength
- Memoize the TableLoader component
+ const memoizedLoader = useMemo(() => ( + <TableLoader + noOfCols={headerTitles.length} + noOfRows={perPageResult} + /> + ), [headerTitles.length, perPageResult]); <InfiniteScroll - dataLength={ - /* istanbul ignore next */ - displayedUsers.length ?? 0 - } + dataLength={displayedUsers.length} next={loadMoreUsers} - loader={ - <TableLoader - noOfCols={headerTitles.length} - noOfRows={perPageResult} - /> - } + loader={memoizedLoader} hasMore={hasMore}
455-468: LGTM: Table rendering with minor type improvementsThe table rendering logic is implemented correctly. Consider adding explicit type annotations for better type safety:
displayedUsers.map( - (user: InterfaceQueryUserListItem, index: number) => { + (user: InterfaceQueryUserListItem, index: ArrayIndex) => { return ( <UsersTableItem key={user.user._id} index={index} // ... rest of the props /> ); }) + type ArrayIndex = number;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
src/screens/Users/Users.tsx(3 hunks)
🔇 Additional comments (1)
src/screens/Users/Users.tsx (1)
230-232: LGTM: Fixed the filter/sort reset issue
The conditional clearing of displayedUsers only when the option changes fixes the issue where clicking the same filter twice caused users to disappear.
Also applies to: 261-263
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #2461 +/- ##
===========================================
- Coverage 98.26% 98.26% -0.01%
===========================================
Files 297 297
Lines 8638 8637 -1
Branches 2515 2485 -30
===========================================
- Hits 8488 8487 -1
Misses 139 139
Partials 11 11 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
|
What kind of change does this PR introduce?
This PR addresses a bug in the infinite scroll functionality. Previously, the
TableLoadercomponent would load wheneverisLoadingwas set totrue, even when it wasn’t necessary. Now, the infinite scroll experience is smooth and works as expected.Issue Number:
Fixes #2437
Did you add tests for your changes?
Yes
Snapshots/Videos:
Infinite.scroll.bugfix.mp4
If relevant, did you update the documentation?
Summary
Bugs solved:
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Documentation