diff --git a/src/pages/home/home-hero.tsx b/src/pages/home/home-hero.tsx index 950baa6..d85d624 100644 --- a/src/pages/home/home-hero.tsx +++ b/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 diff --git a/src/pages/home/rows/composite.tsx b/src/pages/home/rows/composite.tsx index 07882a2..ff470bc 100644 --- a/src/pages/home/rows/composite.tsx +++ b/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() { ))}