diff --git a/apps/www/components/SurveyResults/SurveyRankedAnswersPair.tsx b/apps/www/components/SurveyResults/SurveyRankedAnswersPair.tsx index de6ac3532b3..d57e2b13979 100644 --- a/apps/www/components/SurveyResults/SurveyRankedAnswersPair.tsx +++ b/apps/www/components/SurveyResults/SurveyRankedAnswersPair.tsx @@ -8,7 +8,7 @@ export function SurveyRankedAnswersPair({ {rankedAnswersPair.map((item, index) => (
{/* Decorative progress bar */}
(
{ if (answers.length <= 1) return @@ -17,6 +19,7 @@ export function SurveySummarizedAnswer({ label, answers }: { label: string; answ useEffect(() => { // First, reset the bar to 0% setIsAnimating(false) + setIsBlinking(false) // Then start the animation after a brief delay to ensure the reset is applied const startTimer = setTimeout(() => { @@ -28,15 +31,32 @@ export function SurveySummarizedAnswer({ label, answers }: { label: string; answ setIsAnimating(false) }, 4050) + // Start blinking shortly before text change + const blinkTimer = setTimeout(() => { + setIsBlinking(true) + }, 3700) + + // Stop blinking when text changes + const stopBlinkTimer = setTimeout(() => { + setIsBlinking(false) + }, 4000) + return () => { clearTimeout(startTimer) clearTimeout(stopTimer) + clearTimeout(blinkTimer) + clearTimeout(stopBlinkTimer) } }, [currentIndex]) return (
-

+

{answers[currentIndex]}

{/* Decorative progress bar */} diff --git a/apps/www/components/SurveyResults/surveyResults.css b/apps/www/components/SurveyResults/surveyResults.css index ad80e6a39be..213c9638b10 100644 --- a/apps/www/components/SurveyResults/surveyResults.css +++ b/apps/www/components/SurveyResults/surveyResults.css @@ -21,3 +21,14 @@ clip-path: inset(0 0 0 100%); } } + +@keyframes blink { + 0%, + 49% { + opacity: 1; + } + 50%, + 100% { + opacity: 0; + } +}