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 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.25, delay: Math.min(i * 0.015, 0.2) }}
+                  initial={{ opacity: 0, y: 12 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  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 },