fhfdh

neerajrekwar · Jun 14, 2024 · 590dd0f · 590dd0f
1 parent 83c6d8b
commit 590dd0f
Showing 1 changed file with 8 additions and 10 deletions.
diff --git a/app/components/ui/flip-words.tsx b/app/components/ui/flip-words.tsx
@@ -15,20 +15,18 @@ export const FlipWords = ({
   const [currentWord, setCurrentWord] = useState(words[0]);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
 
+  // thanks for the fix Julian - https://github.com/Julian-AT
   const startAnimation = useCallback(() => {
-    const currentIndex = words.indexOf(currentWord);
-    const nextIndex = (currentIndex + 1) % words.length;
-    setCurrentWord(words[nextIndex]);
+    const word = words[words.indexOf(currentWord) + 1] || words[0];
+    setCurrentWord(word);
     setIsAnimating(true);
   }, [currentWord, words]);
 
   useEffect(() => {
-    if (!isAnimating) {
-      const timer = setTimeout(() => {
+    if (!isAnimating)
+      setTimeout(() => {
         startAnimation();
       }, duration);
-      return () => clearTimeout(timer);
-    }
   }, [isAnimating, duration, startAnimation]);
 
   return (
@@ -67,9 +65,9 @@ export const FlipWords = ({
         )}
         key={currentWord}
       >
-        {currentWord.split("").map((char, index) => (
+        {currentWord.split("").map((letter, index) => (
           <motion.span
-            key={`${currentWord}-${index}`}
+            key={currentWord + index}
             initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
             animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
             transition={{
@@ -78,7 +76,7 @@ export const FlipWords = ({
             }}
             className="inline-block"
           >
-            {char === " " ? "\u00A0" : char}
+            {letter}
           </motion.span>
         ))}
       </motion.div>