Description
The tab switching logic in our dashboard works flawlessly, but the content switches instantly, which can feel a bit abrupt. We want to add a subtle and smooth fade-in animation to the activities grid every time the activeTab state changes.
Expected Behavior
When a user clicks on a different sport tab, the list of the 5 recent sessions should fade in smoothly using Tailwind CSS transitions or keyframe animations (e.g., animate-fade-in or custom Tailwind configuration).
Tasks
Description
The tab switching logic in our dashboard works flawlessly, but the content switches instantly, which can feel a bit abrupt. We want to add a subtle and smooth fade-in animation to the activities grid every time the
activeTabstate changes.Expected Behavior
When a user clicks on a different sport tab, the list of the 5 recent sessions should fade in smoothly using Tailwind CSS transitions or keyframe animations (e.g.,
animate-fade-inor custom Tailwind configuration).Tasks
divof the activity cards grid insrc/components/dashboard/TabbedSessions.tsx.