Hi, I'm building a basic search engine with brave apis with NextJS 14. So once the user on the results page, they can update the query and search again. This updates the url, like localhost:3000/search?q=hello to localhost:3000/search?q=helloworld. This triggers a navigation and the data is fetch from the server.

However, the loading.tsx is not shown when the navigation is happening (The data is fetched from the server) and there's no way to know if a navigation has begun so I can show a loader. How I can fix it? here's the page.tsx file:

i export const fetchCache = "force-cache"; export const revalidate = 3600; // 10 minutes export default async ({ searchParams }: { searchParams: { [key: string]: string } }) => { const q = searchParams["q"]; const getDataFromBrave = await fetch(https://api.search.brave.com/res/v1/web/search?q=${encodeURI(q)}`, {
headers: {
"X-Subscription-Token": process.env.BRAVE_SEARCH_TOKEN!,
},
});

const dataFromBrave = await getDataFromBrave.json();

return (
<Suspense fallback={<Loading />}>
<div className="w-full h-full p-12">
<div className="flex gap-64">
<ResultsListBrave initialPage={dataFromBrave as WebSearchApiResponse} q={q} />
</div>
</div>
</Suspense>
);
};
`