#Show loading UI when navigating

3 messages · Page 1 of 1 (latest)

frigid portal
#

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>
);
};
`

autumn brambleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

misty pebble