Hello, I am a beginner NextJS developer and Ive run into an issue with the Suspense component. It is not rendering its fallback component ever. Any pending promises the child components of <Suspense /> have force the page to use a full page spinner via the loading.js file. However this is not what I want. I want the 2 divs to render as usual and to render a spinner while <CabinList /> is fetching.

Below is my component that is using the Suspense tag. The key prop also does nothing. In no case does this Suspense work. Unless I manually go and enable it through the React Dev Tools. Any advice is greatly appreciated. Thanks

export default function Page({ searchParams }) {
  const filter = searchParams?.capacity ?? "all";
  return (
    <div>
      <h1 className="text-4xl mb-5 text-accent-400 font-medium">
        Our Luxury Cabins
      </h1>
      <p className="text-primary-200 text-lg mb-10">
        Cozy yet luxurious cabins, located right in the heart of the Italian
        Dolomites. Imagine waking up to beautiful mountain views, spending your
        days exploring the dark forests around, or just relaxing in your private
        hot tub under the stars. Enjoy nature&apos;s beauty in your own little
        home away from home. The perfect spot for a peaceful, calm vacation.
        Welcome to paradise.
      </p>
      <div className="flex justify-end mb-8">
        <Filter />
      </div>
      <Suspense fallback={<Spinner />} key={filter}>
        <CabinList filter={filter} />
      </Suspense>
    </div>
  );
}