I am trying to use the instant loading states with the Loading UI. However, I can't achieve the desired outcome.
Below are my components and file structure.
Is there anything that I am doing it wrong? The page.tsx is doing some async data fetching and it's not a client component.

Thanks in advance, been trying to figure this out for few hrs now. 🙏

app/page.tsx

async function fetchRestaurants() {
  try {
    const params = {
      lat: 3.067440966219083,
      lng: 101.60387318211183,
      // radius: 1000,
    };
    const { lat, lng } = params
    const requestUrl = `${process.env.HOST_URL}/api/nearby-search?lat=${lat}&lng=${lng}`;
    const res = await fetch(requestUrl);
    const data = await res.json()
    return data;

  } catch (e) {
    console.error("Error fetching popular restaurants", e);
    throw new Error("Error fetching popular restaurants");
  }
}

export default async function HomePage() {
  const data = await fetchRestaurants();
  const { results: restaurants } = data;

  return (
    <main className="max-w-[1300px] mx-auto">
      <div className="p-4">
        <h1 className="font-bold text-lg mb-2">Popular Restaurants</h1>

        <div>
          { restaurants?.map((restaurant: any) => (
            <div key={restaurant.name} className="">
              { restaurant.name }
            </div>
          ))}
        </div>
      </div>
    </main>
  );
};

app/loading.tsx

export default function Loading() {
  return <p>Loading home pg...</p>
}