perf: streamer la liste des morceaux sans bloquer le rendu de la page

app/paroles/layout.js

@@ -1,7 +1,5 @@
 import {Suspense} from 'react'
-import {notFound} from 'next/navigation'
-import {jwennTeks} from '../../lib/oki-api'
-import TeksDrawer from '../../components/teks/teks-drawer'
+import TeksDrawerLoader from '../../components/teks/teks-drawer-loader'
 import {CurrentTrackProvider} from '../../components/teks/current-track-context'
 import Loading from './loading'
 
@@ -40,23 +38,11 @@ export const metadata = {
   }
 }
 
-async function jwennDotDone() {
-  const teks = await jwennTeks()
-
-  if (!teks) {
-    notFound()
-  }
-
-  return teks
-}
-
-export default async function PawolLayout({children}) {
-  const teks = await jwennDotDone()
-
+export default function PawolLayout({children}) {
   return (
     <CurrentTrackProvider>
       <Suspense fallback={<Loading />}>
-        <TeksDrawer paroles={teks} />
+        <TeksDrawerLoader />
       </Suspense>
       <section>
         {children}

components/teks/lekte.js

@@ -20,6 +20,12 @@ import {getAlias} from '../../lib/utils/format'
 
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
+function createAudio(src) {
+  const audio = new Audio(src)
+  audio.preload = 'metadata'
+  return audio
+}
+
 function parseLrc(text) {
   const lines = []
   for (const raw of text.split('\n')) {
@@ -68,7 +74,7 @@ const TinyText = styled(Typography)({
 })
 
 export default function Lekte({audio, url, parole}) {
-  const audioRef = useRef(new Audio(audio))
+  const audioRef = useRef(createAudio(audio))
   const intervalRef = useRef()
   const isReady = useRef(false)
   const [duration, setDuration] = useState(0)
@@ -135,7 +141,7 @@ export default function Lekte({audio, url, parole}) {
 
   useEffect(() => {
     audioRef.current.pause()
-    audioRef.current = new Audio(audio)
+    audioRef.current = createAudio(audio)
     setIsPlaying(false)
     setVolume(100)
     setPosition(0)

components/teks/teks-drawer-loader.js

@@ -0,0 +1,13 @@
+import {notFound} from 'next/navigation'
+import {jwennTeks} from '../../lib/oki-api'
+import TeksDrawer from './teks-drawer'
+
+export default async function TeksDrawerLoader() {
+  const teks = await jwennTeks()
+
+  if (!teks) {
+    notFound()
+  }
+
+  return <TeksDrawer paroles={teks} />
+}