move discover mounting and tab switching to concurrent rendering

src/components/ui/ContentRow.tsx

@@ -211,9 +211,13 @@ export default function ContentRow({ title, subtitle, items, aspect = 'poster',
               items.map((item, i) => (
                 <motion.div
                   key={item.Id}
-                  initial={{ opacity: 0 }}
+                  initial={{ opacity: 0, y: 12 }}
-                  animate={{ opacity: 1 }}
+                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.25, delay: Math.min(i * 0.015, 0.2) }}
+                  transition={{
+                    duration: 0.4,
+                    delay: Math.min(i * 0.025, 0.4),
+                    ease: [0.16, 1, 0.3, 1],
+                  }}
                   className={`shrink-0 ${widthClass}`}
                 >
                   <PosterCard

src/components/ui/LazyMount.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, Component, type ReactNode } from 'react'
+import { useEffect, useRef, useState, Component, type ReactNode, startTransition } from 'react'
 
 interface Props {
   /** Children to mount when scrolled near, unmount when scrolled far.
@@ -69,7 +69,9 @@ export default function LazyMount({
     const mountObs = new IntersectionObserver(
       entries => {
         for (const e of entries) {
-          if (e.isIntersecting) setMounted(true)
+          if (e.isIntersecting) {
+            startTransition(() => setMounted(true))
+          }
         }
       },
       { rootMargin: mountMargin },

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))}
             />
           )}
         </>