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

src/pages/home/rows/composite.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, startTransition } from 'react'
 import { Filter } from '../../../lib/icons'
 import { useLibraryItems } from '../../../hooks/use-jellyfin'
 import ContentRow from '../../../components/ui/ContentRow'
@@ -99,7 +99,7 @@ function MoodSection() {
   })
   function pick(key: string) {
     const next = active === key ? null : key
-    setActive(next)
+    startTransition(() => setActive(next))
     try {
       if (next) localStorage.setItem('home_mood', next)
       else localStorage.removeItem('home_mood')
@@ -157,14 +157,14 @@ function SmartShelvesSection() {
       ))}
       <div className="px-7 mb-10">
         <button
-          onClick={() => setWizardOpen(true)}
+          onClick={() => startTransition(() => setWizardOpen(true))}
           className="inline-flex items-center gap-2 h-9 px-3.5 rounded-full bg-elevated/50 ring-1 ring-border hover:ring-accent/40 hover:text-accent text-[12.5px] text-text-2 tracking-tight transition focus-ring"
         >
           <Filter size={13} />
           {shelves.length === 0 ? 'Create a smart shelf' : 'New smart shelf'}
         </button>
       </div>
-      <SmartShelfWizard open={wizardOpen} onClose={() => setWizardOpen(false)} />
+      <SmartShelfWizard open={wizardOpen} onClose={() => startTransition(() => setWizardOpen(false))} />
     </>
   )
 }