I am new in nextjs and i am learing the latest version of nextjs which is nextjs 14 with app router and there i am making loading.jsx file in the src/app/loading.jsx like this

export default function RootLoading() {
  return <h1>Root Loading...</h1>
}

and i am also making a different loading.jsx file for different route src/app/faq/loading.jsx like this

export default function FAQLoading() {
  return <h1>FAQ Page Loading...</h1>
}

and there everything is working fine when i go to any route then RootLoading is shown if page is not loaded and when i go to the faq route then FAQLoading is shown if faq page is not loaded. Now see my problem, i again make a loading.jsx file in src/app/products/[id]/loading.jsx like this

export default function ProductDetailsLoading() {
  return <h1>Product Details Page Loading...</h1>
}

but this is not working, when i am going to product details with any id then RootLoading is shown which i do not want and after many try i asked to gemini and its give me some hint to do like this src/app/products/[id]/page.jsx

import ProductDetails from "./ProductDetails";
import { Suspense } from "react";
import Loading from "./loading";

export default async function ProductDetailsPage({ params }) {
  return (
    <Suspense
      key={params.id}
      fallback={<Loading />}
    >
      <ProductDetails id={params.id} />
    </Suspense>
  );
}

and src/app/products/[id]/ProductDetails.jsx

import Image from "next/image";

export default async function ProductDetails({ id }) {
  const product = await fetch(`https://dummyjson.com/products/${id}`);

  return (
    <div className="flex flex-col gap-4 lg:flex-row lg:items-center">
      <Image
        src={product?.imageUrl ?? ""}
        alt={product?.title ?? ""}
        width={500}
        height={500}
        className="rounded-lg"
        priority
      />
      <div>
        <h1 className="text-5xl font-bold">{product?.title}</h1>
        <p className="py-6">{product?.description}</p>
        <p>{product?.price}</p>
      </div>
    </div>
  );
}

but this is also not working, i think this is all due to dynamic routes.

But i want show a unique loading ui for a dynamic routes in nextjs 14 with app route.