How to Display a Loader While Waiting for Server-Side Data Fetch in Next.js?

I’m working on a Next.js application where I’m using getServerSession and getHotelAvail to fetch data server-side in the Search component. However, when the user submits the search form, the page waits on the form (even though an url is pushed) and only when getHotelAvail finishes, the Search component with the fetched data renders. This causes the user to experience a delay without any feedback that the data is being loaded.

For reasons unknown to me this only happens when building the project, on development it works as expected.

Form Submission Logic:

else {
  let obj = { 
    ...values, 
    checkIn: format(date.from, "yyyy-MM-dd"), 
    checkOut: format(date.to, "yyyy-MM-dd"), 
    city: values.city.city, 
    lat: values.city.lat, 
    lng: values.city.lng 
  };
  
  if (values.city.state_province) obj.state = values.city.state_province;

  let x = getPairs(obj)
    .map(([[key0, ...keysRest], value]) =>
      `${key0}${keysRest.map(a => `[${a}]`).join('')}=${value}`)
    .join('&');
    
  router.push(`/search?${x}`);
  router.refresh();

  if (path === "/search") {
    window.history.replaceState(null, '', `/search?${x}`);
    window.location.reload();
    router.refresh();
  }
}

Search Results Component:

const Search = async ({ searchParams }) => {
  try {
    const session = await getServerSession(authOptions);
    if(!session.user.name) throw new Error('Unauthorized User');
    
    const user = await getUserById(session.user.name);
    if(!user.status) throw new Error('Unauthorized User');
    
    const data = await getHotelAvail(parseSearchParams(searchParams));
    if(!data.list?.length) throw new Error('No hotels available for this search');
    
    // Render logic...
  } catch (error) {
    // Error handling...
  }
};

How can I implement a loader or some sort of visual feedback to the user during the data fetch, while still maintaining the server-side requests? The goal is to show the loader as soon as the form is submitted and not wait until the data is fully loaded.

Any guidance on the best practices for handling this in Next.js would be greatly appreciated.

I used to have a skeleton but the same would happend.

I tried to set the loader in the submit logic but it still the same, the Search Result Component and the loader would only render after getHotelAvail finishes.