feat(landing): PR for issue #714 Improve Gallery Feature Interaction (hover delay + cursor cleanup) #715
Conversation
WalkthroughAdjusts three landing-page UI behaviors: doubles marquee scroll distance, replaces click-to-toggle with a 1s hover-activation (with per-index timers) for HowItWorks steps, and makes FAQ container border classes conditional on open state. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ 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: 0
🧹 Nitpick comments (3)
landing-page/src/Pages/Demo/marqu.tsx (1)
35-41: Confirm intended marquee speed after increasing travel distanceChanging
xfrom-100%to-200%with the sameduration: 10doubles the scroll speed. If the goal was only to lengthen the loop while keeping the old pace, consider bumpingdurationto ~20s to preserve the previous feel.landing-page/src/Pages/HowItWorks/HowItWorks.tsx (2)
2-3: Tighten hover timer typing and add unmount cleanupThe
hoverTimerspattern is good, but two small refinements would make it more robust:
- Use
ReturnType<typeof setTimeout>instead ofnumberto avoid env-specific timer ID assumptions.- Clear any pending timers on unmount to avoid possible “state update on unmounted component” warnings.
For example:
-import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; const [activeStep, setActiveStep] = useState<number | null>(null); -const hoverTimers = useRef<Record<number, number | null>>({}); +const hoverTimers = useRef<Record<number, ReturnType<typeof setTimeout> | null>>({}); +useEffect(() => { + return () => { + Object.values(hoverTimers.current).forEach((t) => { + if (t != null) clearTimeout(t); + }); + }; +}, []);Also applies to: 36-38
57-75: Hover delay logic looks correct; confirm 1s vs 2s requirement and add non-hover fallbackThe enter/leave handlers implement a 1s intentional-hover delay and cancel activation when the user leaves early, and they immediately collapse the card on leave when active — all aligned with the “reduce accidental flashes” goal.
Two follow-ups to consider:
- Your PR text mentions cancelling expansion if hover is less than 2s, but the code uses a 1s timer. If you truly need a 2s threshold, adjust the timeout value here (and any UX copy) accordingly.
- Activation is currently mouse-hover only. For touch and keyboard users, you may want a fallback (e.g.,
onClickand/oronFocus/onBlurmirroring this logic, or making the card a focusable button/anchor) so the details remain discoverable and accessible.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
landing-page/src/Pages/Demo/marqu.tsx(1 hunks)landing-page/src/Pages/HowItWorks/HowItWorks.tsx(3 hunks)
github-actions
Bot
added
UI
documentation
|
Demo video : PR1.demo.mp4This clip demonstrates the updated hover behavior for Gallery feature cards:
This resolves the earlier issue where cards expanded instantly on hover and used an emoji cursor, leading to accidental content flashes and inconsistent desktop interactions. @rahulharpal1603 added a short demo video showing the updated hover delay behavior and how it resolves the accidental expansion issue. |
Supritha-gurazala
changed the title
|
PR ready for review @rahulharpal1603 |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
landing-page/src/Pages/FaqPage/FAQ.tsx
🔇 Additional comments (1)
landing-page/src/Pages/FaqPage/FAQ.tsx (1)
99-105: Clarify the relationship between FAQ changes and PR objectives.The PR objectives describe improvements to gallery feature interaction (hover delay, cursor cleanup), but this file modifies FAQ border styling. Please confirm whether:
- This FAQ change is intentionally included as part of a broader UI polish effort, or
- The PR contains unrelated changes that should be split into separate PRs.
| className={`rounded-xl overflow-hidden transition-all duration-300 | ||
| bg-white dark:bg-black | ||
| border | ||
| ${isOpen | ||
| ? 'border- 6 border-pink-500 dark:border-grey-500' | ||
| : 'border- 6 - dark:border-grey-500'} | ||
| `} |
There was a problem hiding this comment.
Fix invalid CSS class names with embedded spaces.
Lines 103-104 contain malformed Tailwind CSS classes:
'border- 6 border-pink-500 dark:border-grey-500'— "border- 6" has a space'border- 6 - dark:border-grey-500'— "border- 6 -" has spaces
These invalid classes will not render, breaking the intended open/closed border styling. Additionally, Tailwind uses gray not grey for color names.
🔎 Proposed fix
- className={`rounded-xl overflow-hidden transition-all duration-300
- bg-white dark:bg-black
- border
- ${isOpen
- ? 'border- 6 border-pink-500 dark:border-grey-500'
- : 'border- 6 - dark:border-grey-500'}
-`}
+ className={`rounded-xl overflow-hidden transition-all duration-300
+ bg-white dark:bg-black
+ border
+ ${isOpen
+ ? 'border-2 border-pink-500 dark:border-gray-500'
+ : 'border-2 border-gray-300 dark:border-gray-700'}
+`}🤖 Prompt for AI Agents
In landing-page/src/Pages/FaqPage/FAQ.tsx around lines 99 to 105, the Tailwind
class strings contain malformed classes with embedded spaces and the wrong color
name; remove the stray spaces so classes are contiguous (e.g., change 'border-
6' and 'border- 6 -' to a valid Tailwind border utility like 'border-2' or
'border' or an arbitrary value 'border-[6px]'), replace 'grey' with Tailwind's
'gray' (e.g., dark:border-gray-500), and ensure the open/closed branches produce
valid class names (no extra hyphens or spaces) so the border thickness and color
apply correctly.
rahulharpal1603
left a comment
rahulharpal1603
left a comment
There was a problem hiding this comment.
Thanks @Supritha-gurazala!
|
No problem !! |
2 participants
Summary:
Closes Feat: Improve Gallery Feature Interaction (hover delay + cursor cleanup) #714
Summary by CodeRabbit
Style
Behavior
✏️ Tip: You can customize this high-level summary in your review settings.