feat: Slowed down speed of slider and added pause on hover/click#315
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe ChangesMarquee Animation Interactivity
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
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)
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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
client/src/components/ui/shape-landing-hero.tsx (1)
281-299:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRemove
aria-hiddenfrom the interactive marquee and add keyboard operability.Line 283 marks the container as hidden from assistive tech, but Lines 294-299 make it clickable/interactive. This creates an unreachable control for keyboard/screen-reader users.
Suggested fix
- <div - className="relative py-6 border-y border-stone-200 dark:border-white/10 bg-stone-100/60 dark:bg-white/2 overflow-hidden" - aria-hidden - > + <div className="relative py-6 border-y border-stone-200 dark:border-white/10 bg-stone-100/60 dark:bg-white/2 overflow-hidden"> @@ - <div + <div onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} onClick={onclicked} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + onclicked(); + } + }} + role="button" + tabIndex={0} + aria-label="Pause or resume recent wins marquee" className="cursor-pointer" >🤖 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 `@client/src/components/ui/shape-landing-hero.tsx` around lines 281 - 299, The container currently has aria-hidden while also being interactive (uses onclicked, mouseEnter, mouseLeave), making it inaccessible; remove aria-hidden from the outer div and make the interactive marquee element keyboard-accessible by adding role="button", tabIndex={0}, and an onKeyDown handler that triggers onclicked for Enter/Space, plus use onFocus/onBlur (or call mouseEnter/mouseLeave) to mirror hover behavior; update references to the handlers (mouseEnter, mouseLeave, onclicked) accordingly and ensure the cursor-pointer styling remains for visual affordance.
🤖 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 `@client/src/components/ui/shape-landing-hero.tsx`:
- Around line 259-277: The current handlers (mouseEnter, mouseLeave, onclicked)
use a single isPaused.current flag so mouseLeave always resumes via
startAnimation(), which can override a user’s click-to-pause. Introduce two
separate booleans (e.g., hoverPaused and clickPaused, or hoverPaused.current and
clickPaused.current alongside isPaused) and update mouseEnter to set
hoverPaused=true and stop controls, mouseLeave to set hoverPaused=false and only
call startAnimation() if clickPaused is false (i.e., combinedPaused =
hoverPaused || clickPaused is false), and update onclicked to toggle clickPaused
and start/stop based on the combined paused state; keep references to
controls.stop and startAnimation and replace uses of isPaused.current with the
combined state.
---
Outside diff comments:
In `@client/src/components/ui/shape-landing-hero.tsx`:
- Around line 281-299: The container currently has aria-hidden while also being
interactive (uses onclicked, mouseEnter, mouseLeave), making it inaccessible;
remove aria-hidden from the outer div and make the interactive marquee element
keyboard-accessible by adding role="button", tabIndex={0}, and an onKeyDown
handler that triggers onclicked for Enter/Space, plus use onFocus/onBlur (or
call mouseEnter/mouseLeave) to mirror hover behavior; update references to the
handlers (mouseEnter, mouseLeave, onclicked) accordingly and ensure the
cursor-pointer styling remains for visual affordance.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: a6691d07-e7a1-49e4-a579-ddb529ab4bd1
📒 Files selected for processing (1)
client/src/components/ui/shape-landing-hero.tsx
Abfa41
added
level:beginner
|
Hello @Sachinchaurasiya360 , just following up on this PR. Please let me know if any changes are needed or if you have any feedback. Happy to make any modifications required. |
3 participants
Summary
The placement slider was moving too fast making it hard to read. This PR slows it down and adds the ability to pause it by hovering or clicking on it. This functionality is done by using Framer Motion's
useAnimationhook.Changes
animateandtransitionprops withuseAnimationcontrols inshape-landing-hero.tsx.useRefto track paused state without causing re-renders.mouseEnteredhandler — pauses animation on hover.mouseLefthandler — resumes animation when mouse leaves.onclickedhandler — toggles pause/resume on click.motion.divinside adivwith event handlers.cursor-pointerclass to indicate slider is interactive.How to test
Screenshots
Before
InternHack-vdo.mp4
After
InternHack.2.mp4
Summary by CodeRabbit