I have a dynamic route [id] for posts

import Post from “./components/post”
import { Suspense } from “react”

export default function page({params}) {
    return (
        <div className="mt-[80px] container text-white mx-auto">
            <Suspense fallback="loading..." key={params.id}>
                <Post id={params.id}/>
            </Suspense>
        </div>
    )
}

import prisma from "@/prisma/client"


export default async function Post(props) {

    let post = await prisma.art.findUnique({
        where: {
            id: Number(props.id)
        }
    })

    return (
        <div>
            {post.id}
        </div>
    )
}

the first one is the code for [id]/page.js and the second is for [id]/components/post.js
so the problem is that suspense is not working only in this specific route and it worked on the main route, it shows a blank page until the fetch is done and show the result .
idk what im doing wrong i wish someone could explain what’s going on exactly, and thanks in advance 🙂

I suspense fallback expected to show, but only a blank page shows up until the fetch done