NextJS loading.tsx work perfectly but Suspense doesn't work

Question

This is my first project in NextJS, and I'm trying to use Suspense for loading. I want the heading appear without waiting for the fetched data.

Here is my code:

The posts page

import React, { Suspense } from "react";
import PostsList from "../components/PostsList/PostsList";

export default function Posts() {
    return (
        <section className="py-10">
            <div className="container mx-auto px-3">
                <h1 className="text-5xl text-center mb-10">All Posts</h1>
                <Suspense fallback={<div>Loading posts..</div>}>
                    <PostsList />
                </Suspense>
            </div>
        </section>
    );
}

The posts list Component

import Link from "next/link";
import React from "react";

async function getPosts() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
        next: { revalidate: 3600 },
    });
    await new Promise((resolve) => setTimeout(resolve, 2000));
    if (!res.ok) {
        throw new Error("Failed to fetch data");
    }

    return res.json();
}

export default async function PostsList() {
    const posts = await getPosts();

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {posts.map((post: { id: number; title: string; body: string }) => (
                <Link
                    className="inline-grid"
                    key={post.id}
                    href={`/posts/${post.id}`}
                >
                    <div className="bg-violet-600 rounded-lg p-5">
                        <h4 className="text-xl font-bold mb-2 capitalize">
                            {post.title}
                        </h4>
                        <p>{post.body}</p>
                    </div>
                </Link>
            ))}
        </div>
    );
}

The post details page

import PostCard from "@/app/components/PostCard/PostCard";
import Link from "next/link";
import React, { Suspense } from "react";

type ParamsType = {
    params: {
        postId: number;
    };
};

export default function PostDetails({ params }: ParamsType) {
    const postId = params.postId;
    return (
        <div>
            <Link href={"/posts"}>Back</Link>
            <div className="max-w-xl mx-auto my-10">
                <Suspense fallback={<div>Loading single post..</div>}>
                    <PostCard postId={postId} />
                </Suspense>
            </div>
        </div>
    );
}

The post card component

import React from "react";

type PostType = {
    id: number;
    title: string;
    body: string;
};

export default async function PostCard({ postId }: { postId: number }) {
    await new Promise((resolve) => setTimeout(resolve, 2000));

    const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${postId}`,
        { cache: "force-cache" }
    );
    const post: PostType = await response.json();

    return (
        <div className="bg-violet-600 rounded-lg p-5">
            <h4 className="text-xl font-bold mb-2 capitalize">{post.title}</h4>
            <p>{post.body}</p>
        </div>
    );
}

I searched everywhere, but i didn't find an answer. I said that maybe the problem in local environment, but even when i deployed it the problem persists.