Weird behaviour with app dir. loading.jsx does not execute.

[sinful vessel]

import Comp from './ui'
import db from '@/db/db' // uses this library https://github.com/porsager/postgres

export const revalidate = 0

/*
 * This getStuff makes loading.jsx appear
 */
async function getStuff() {
  try {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return []
  } catch (err) {
    console.log(err)
    throw new Error('err')
  }
}


/*
 * This getStuff does not make loading.jsx appear when opening the page. Why?
 * Both getStuff funtions return a promise. What is the difference?
 */
async function getStuff() {
  try {
    const stuff = await db`
        select * from myStuffTable
    `
    return stuff
  } catch (err) {
    console.log(err)
    throw new Error('err')
  }
}

export default async function Stuff() {
  const stuff = await getStuff()
  return <Comp stuff={stuff} />
}

[sterile ocean]

Hi @sinful vessel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[sinful vessel]

why does getStuff when using postgresql lib query function (which does return promise also) doesn't make loading.jsx appear?

[sterile ocean]

---

Based on the information extracts provided, I cannot find a direct reference to the specific issue you're encountering with the loading.jsx not appearing when using the second getStuff function. However, I can provide some insights on data fetching and loading states in Next.js.

In Next.js, you can use the loading.js file to show an instant loading state from the server while the content of a route segment loads. Once all data fetching in the route segment has finished, the loading UI will be swapped for the content (source (https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense)).

To better handle loading states and data fetching, you can consider using the SWR library, which is highly recommended for client-side data fetching in Next.js. It handles caching, revalidation, focus tracking, refetching on intervals, and more (source (https://nextjs.org/docs/basic-features/data-fetching/client-side)).

For more information on data fetching and loading states in Next.js, you can refer to the following documentation:

• Next.js Data Fetching (https://beta.nextjs.org/docs/data-fetching)
• SWR Documentation (https://swr.vercel.app/docs/getting-started)

Please note that the provided extracts may not cover the specific issue you're facing. If you need further assistance, consider referring to the official Next.js documentation or seeking help from the community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: