solved #2491 by changing code #2672
Conversation
|
@ronitsantwani is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds a new TypingAnimation React component with typing and cursor-blink effects, then integrates it into the Home page hero heading to render "Welcome to VigyBag!" with optional highlighting and on-complete callback support. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Home as Home.jsx
participant TA as TypingAnimation
participant TypingFX as Typing Effect (setInterval)
participant CursorFX as Cursor Blink (setInterval)
participant State as Component State
User->>Home: Load page
Home->>TA: Render with props (text, speed, showCursor, highlight...)
TA->>State: Initialize displayedText="", index=0, cursorVisible=true
TA->>TypingFX: Start interval (every speed ms)
TA->>CursorFX: Start interval (every cursorBlinkSpeed ms) when showCursor
loop While index < text.length
TypingFX->>State: Append next char, increment index
TA-->>User: Rerender with updated displayedText
end
TypingFX->>TA: Detect completion
TA->>TypingFX: Clear interval
alt onComplete provided
TA->>Home: Invoke onComplete()
else No callback
TA-->>User: Idle with blinking cursor
end
loop While showCursor
CursorFX->>State: Toggle cursorVisible
TA-->>User: Rerender caret visibility
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests
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
🧹 Nitpick comments (1)
src/User/components/TypingAnimation/TypingAnimation.jsx (1)
3-12: Consider adding prop validation.The component lacks PropTypes or TypeScript types. The required
textprop and numeric props likespeedandcursorBlinkSpeedhave no validation, which could cause runtime errors if invalid values are passed.Consider adding PropTypes:
+import PropTypes from 'prop-types'; + const TypingAnimation = ({ text, speed = 100, showCursor = true, cursorBlinkSpeed = 530, className = "", onComplete = null, highlightText = null, highlightClass = "text-green-700" }) => {Add validation at the end of the file:
TypingAnimation.propTypes = { text: PropTypes.string.isRequired, speed: PropTypes.number, showCursor: PropTypes.bool, cursorBlinkSpeed: PropTypes.number, className: PropTypes.string, onComplete: PropTypes.func, highlightText: PropTypes.string, highlightClass: PropTypes.string };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/User/components/TypingAnimation/TypingAnimation.jsx(1 hunks)src/User/pages/Home/Home.jsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/User/pages/Home/Home.jsx (1)
src/User/components/TypingAnimation/TypingAnimation.jsx (1)
TypingAnimation(3-90)
🔇 Additional comments (6)
src/User/pages/Home/Home.jsx (2)
10-10: LGTM!The import statement is correctly structured and follows standard React patterns.
151-161: LGTM!The TypingAnimation integration is well-configured with appropriate props for the hero heading. The highlight styling and timing parameters enhance the user experience.
src/User/components/TypingAnimation/TypingAnimation.jsx (4)
13-16: LGTM!The state initialization is appropriate for the typing animation effect, with sensible default values.
36-44: LGTM!The cursor blinking logic is correctly implemented with proper cleanup.
47-73: LGTM!The highlight rendering logic correctly handles multiple occurrences of the highlight text and prevents rendering empty spans.
75-89: LGTM!The rendering logic is well-structured with appropriate accessibility attributes and responsive cursor styling.
| useEffect(() => { | ||
| if (currentIndex < text.length) { | ||
| const timeout = setTimeout(() => { | ||
| setDisplayText(prev => prev + text[currentIndex]); | ||
| setCurrentIndex(prev => prev + 1); | ||
| }, speed); | ||
|
|
||
| return () => clearTimeout(timeout); | ||
| } else if (!isComplete) { | ||
| setIsComplete(true); | ||
| if (onComplete) { | ||
| onComplete(); | ||
| } | ||
| } | ||
| }, [currentIndex, text, speed, onComplete, isComplete]); |
There was a problem hiding this comment.
Add reset logic when text prop changes.
If the text prop changes mid-animation, the effect doesn't reset currentIndex or displayText, causing the new text to concatenate with the old text. This leads to incorrect display.
Apply this diff to reset state when text changes:
+ // Reset animation when text changes
+ useEffect(() => {
+ setDisplayText('');
+ setCurrentIndex(0);
+ setIsComplete(false);
+ }, [text]);
+
// Typing effect
useEffect(() => {
if (currentIndex < text.length) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (currentIndex < text.length) { | |
| const timeout = setTimeout(() => { | |
| setDisplayText(prev => prev + text[currentIndex]); | |
| setCurrentIndex(prev => prev + 1); | |
| }, speed); | |
| return () => clearTimeout(timeout); | |
| } else if (!isComplete) { | |
| setIsComplete(true); | |
| if (onComplete) { | |
| onComplete(); | |
| } | |
| } | |
| }, [currentIndex, text, speed, onComplete, isComplete]); | |
| // Reset animation when text changes | |
| useEffect(() => { | |
| setDisplayText(''); | |
| setCurrentIndex(0); | |
| setIsComplete(false); | |
| }, [text]); | |
| // Typing effect | |
| useEffect(() => { | |
| if (currentIndex < text.length) { | |
| const timeout = setTimeout(() => { | |
| setDisplayText(prev => prev + text[currentIndex]); | |
| setCurrentIndex(prev => prev + 1); | |
| }, speed); | |
| return () => clearTimeout(timeout); | |
| } else if (!isComplete) { | |
| setIsComplete(true); | |
| if (onComplete) { | |
| onComplete(); | |
| } | |
| } | |
| }, [currentIndex, text, speed, onComplete, isComplete]); |
🤖 Prompt for AI Agents
In src/User/components/TypingAnimation/TypingAnimation.jsx around lines 19 to
33, the effect doesn't reset state when the text prop changes, causing new text
to append to the old display; add logic to reset the typing state when text
changes — either add a separate useEffect that watches text and calls
setCurrentIndex(0), setDisplayText(''), and setIsComplete(false), or in the
existing effect detect a change in text via a ref/previousText variable and
perform the same resets before starting the new timeout.
1 participant
i have changed "Welcome to VigyBag" into typing annimation in the main website
Summary by CodeRabbit