javascript - Kan inte visa laddningskomponent i Next.js v13

Jag har problem med att implementera en laddningskomponent i Next.js v13. Enligt dokumentationen skapade jag en loading.tsx-fil i min src-katalog, men den visas inte. Jag har också inkluderat en funktion för att hämta data. Men varje gång jag uppdaterar sidan visas API-svaret direkt från servern utan att laddningskomponenten visas. Kan någon föreslå hur detta kan åtgärdas? Dessutom, krävs någon ytterligare konfiguration för att visa laddningskomponenten?

Här är min kod:

I page.tsx:

import { IResult } from '@/interface';
import Results from '@/components/Results';

const API_KEY = process.env.API_KEY

export default async function Home({ searchParams } : {searchParams: any}) {
  const genre = searchParams.genre || 'fetchTrending';
  const res = await fetch(`https://api.themoviedb.org/3/${genre === 'fetchTopRated'
    ? 'movie/top_rated' :
      'trending/all/week'
  }?api_key=${API_KEY}&language=en-US&page=1`, { next: {revalidate: 100000 }})

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }

  const data = await res.json()

  const results = data.results as IResult[]

  console.log({results})
  return (
    <>
      <main className="flex min-h-screen flex-col items-center justify-between p-4">
        <Results results={results}></Results>
      </main>
    </>
  )
}

Och i loading.tsx:

import React from 'react'

export default function Loading() {
  return (
    <div>loading...</div>
  )
}

Jag skulle verkligen uppskatta all hjälp eller förslag. Tack!

Svar #1

Loading-komponenten fungerar när du navigerar mellan sidor.

Från dokumenten

Ett omedelbart laddningstillstånd är en reservanvändargränssnitt som visas direkt vid navigering. Du kan förrendera laddningsindikatorer såsom skelett och snurror, eller en liten men meningsfull del av framtida skärmar såsom ett omslagsfoto, titel, etc. Detta hjälper användare att förstå att appen svarar och ger en bättre användarupplevelse.

om du navigerar från en annan sida till Home-sidan, kommer du att se laddningskomponenten

Svar #2

I NextJS 13, istället för att lägga till loading.tsx och page.tsx i src ska du lägga till dessa filer i app, om du använder src, då src/app/...

Till exempel, om du vill skapa en hemsida-rutt skulle din filstruktur se ut så här: src/app/home/page.tsx src/app/home/loading.tsx

Du behöver ingen extra konfiguration för detta

För referens - Nextjs laddningsdokument

Relaterade artiklar