diff --git a/src/components/ui/ContentRow.tsx b/src/components/ui/ContentRow.tsx index 99981da..a60ded3 100644 --- a/src/components/ui/ContentRow.tsx +++ b/src/components/ui/ContentRow.tsx @@ -211,9 +211,13 @@ export default function ContentRow({ title, subtitle, items, aspect = 'poster', items.map((item, i) => ( { for (const e of entries) { - if (e.isIntersecting) setMounted(true) + if (e.isIntersecting) { + startTransition(() => setMounted(true)) + } } }, { rootMargin: mountMargin }, diff --git a/src/pages/DiscoverPage.tsx b/src/pages/DiscoverPage.tsx index 91e26c9..f360114 100644 --- a/src/pages/DiscoverPage.tsx +++ b/src/pages/DiscoverPage.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, startTransition } from 'react' import { useHasTmdbKey } from '../hooks/use-external' import LazyMount from '../components/ui/LazyMount' import { usePreferencesStore } from '../stores/preferences-store' @@ -150,7 +150,7 @@ export default function DiscoverPage() { subtitle="Top of each genre, missing from your shelves" tiles={genreTiles()} expanded={expanded} - onSelect={setExpanded} + onSelect={k => startTransition(() => setExpanded(k))} /> {kind === 'movie' && ( @@ -160,7 +160,7 @@ export default function DiscoverPage() { subtitle="Top-rated cinema by original language" tiles={languageTiles()} expanded={expanded} - onSelect={setExpanded} + onSelect={k => startTransition(() => setExpanded(k))} /> )} @@ -171,7 +171,7 @@ export default function DiscoverPage() { subtitle="Films grouped by who made them" tiles={studioTiles()} expanded={expanded} - onSelect={setExpanded} + onSelect={k => startTransition(() => setExpanded(k))} /> )} @@ -182,7 +182,7 @@ export default function DiscoverPage() { subtitle="Shows grouped by where they air" tiles={networkTiles()} expanded={expanded} - onSelect={setExpanded} + onSelect={k => startTransition(() => setExpanded(k))} /> )}