move homepage state changes to concurrent rendering for smoother scroll

src/pages/home/home-hero.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, startTransition } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Play, Info, Flame, ChevronLeft, ChevronRight, Star, Clock, Tv2, Film } from '../../lib/icons'
 import type { useNavigate } from 'react-router-dom'
@@ -74,15 +74,15 @@ export function FeaturedCarousel({
 
   function goPrev() {
     directionRef.current = -1
-    setIndex(i => (i - 1 + total) % total)
+    startTransition(() => setIndex(i => (i - 1 + total) % total))
   }
   function goNext() {
     directionRef.current = 1
-    setIndex(i => (i + 1) % total)
+    startTransition(() => setIndex(i => (i + 1) % total))
   }
   function goTo(i: number) {
     directionRef.current = i > index ? 1 : -1
-    setIndex(i)
+    startTransition(() => setIndex(i))
   }
 
   if (!item) return null