Feat: Add reusable shimmer component and loading state in task list#35
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThe pull request introduces a new ShimmerSkeleton component along with its corresponding tests to manage loading states. A new CSS animation and class are added to create the shimmer effect, and the Tasks page is updated to wrap task lists in the ShimmerSkeleton component. The tests validate both loading and loaded scenarios as well as custom and default styling dimensions. All changes are additive, with no modifications to existing public interfaces. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant TP as Tasks Page
participant SS as ShimmerSkeleton
participant TL as TaskList
U->>TP: Navigate to Tasks Page
TP->>TP: Initialize state (isFetchingTaskData = true)
TP->>SS: Render ShimmerSkeleton (loading = true)
SS->>SS: Check loading prop (true)
SS-->>U: Display shimmer effect
TP->>TP: Simulate delay (2000ms via setTimeout)
TP->>TP: Update state (isFetchingTaskData = false)
TP->>SS: Render ShimmerSkeleton (loading = false)
SS->>TL: Render TaskList with task data
TL-->>U: Display tasks
Poem
🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
__tests__/unit/ShimmerSkeleton.test.tsx(1 hunks)app/globals.css(1 hunks)app/tasks/page.tsx(1 hunks)components/SimmerSkeleton.tsx(1 hunks)
🔇 Additional comments (7)
components/SimmerSkeleton.tsx (1)
4-10: Well-defined props interfaceThe props interface is clearly defined with appropriate types and documentation. Good job including optional properties for customizing the component dimensions.
app/tasks/page.tsx (3)
11-14: Good approach for tracking loading stateThe code correctly adds a state variable to track data fetching status and efficiently filters tasks by status.
32-34: Good implementation of ShimmerSkeleton for Todo sectionThe ShimmerSkeleton component is correctly integrated with the TaskList to show loading state.
39-41: Good implementation of ShimmerSkeleton for In Progress sectionThe ShimmerSkeleton component is correctly integrated with the TaskList to show loading state.
__tests__/unit/ShimmerSkeleton.test.tsx (3)
14-28: Well-written test for the loading stateThis test correctly verifies that the shimmer is shown and children are hidden during loading.
45-62: Good test for custom dimensionsThis test effectively verifies that custom dimension props are correctly applied to the component.
64-81: Comprehensive test for default dimensionsThis test effectively verifies the default behavior when custom dimensions are not provided.
shubhdevelop
changed the title
|
Can you please attach the test coverage report in the screenshot section? |
all the test cases are passing, test by test report is not there in the coverage report, i have added the screenshot add test cases I have added |
Achintya-Chatterjee
changed the title
Achintya-Chatterjee
changed the title
- componet now accepts className and style as an props - more clean up - changed test, and added 1 more test case for testing the case where style object is present - Added test for the utility - added twMerge and clsx utility pacakages
5 participants
Date: 15th March 2025
Developer Name:
Shubham RajIssue Ticket Number
Description
This Added component works as the as an loading state, while the data is being fetched, based on the loading state wee conditionally renders either the shimmer Skeleton animation component or the child component if the fetching/loading is finished
Usage
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screencast
Screencast 1
Screencast.from.2025-03-23.04-04-04.mp4
Test Coverage
Unit Test
test coverage
Additional Notes
Have added fake delay in the useEffect to simulate delay in the data fetching