Hello, I'm currently facing issues getting a loading spinner to work with suspense in Next.js 14.

I have this component that wraps an asynchronous component with suspense:

export const ItemsTemplate: React.FC = () => { return ( <Suspense fallback={<div style={{color: 'red', fontSize: '72px'}}>Loading papa...............</div>}> <List/> </Suspense> ) }

And in the List component, I have the following:

export async function List() { const data = await getData<IItemApiResponse[]>('pokemon/ditto'); return ( <section> {/* ... */} </section> ); };

Essentially, it's a fetch to the PokeAPI. The issue is as follows:

If I add a setTimeout to the fetch, making the promise take, for example, 5 seconds to resolve, the loading spinner is displayed for those 5 seconds. However, if I use a regular fetch without a setTimeout or a delay for the promise to resolve, it DOESN'T WORK.

Example of it working:

await new Promise((resolve) => setTimeout(resolve, 5000)); const res = await fetch('https://pokeapi.co/api/v2/pokemon/ditto'); const data = await res.json();

Example of it not working (I'm sharing the getData function from my component):

export async function getData<T>(uri: string)
{
    const res = await fetch(`${config.urlBase}/${uri}`)

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

    return (await res.json()) as T
}

As you can see, it only works if I give the promise some time to resolve, but it doesn't work with a regular fetch.