Suspense fallback in next.js 14 isn’t showing

I’m trying to use Suspense in my next.js app but the fallback doesn’t show even if I hardcoded a delay. The results always show even if i’m refreshing so I assume it’s a problem with the cache. How can I show the fallback?

import { Suspense } from "react";
import Posts from "@/components/Posts";

export default async function Home() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>} />
        <Posts />
      <Suspense />
    </div>
  );
}

Posts

async function getPosts() {
  let res = await fetch(`https://jsonplaceholder.typicode.com/posts?delay=3000`);
  return res.json();
}

const Posts = async () => {
  const posts = await getPosts();

  return (
    <div>
      {posts.map((post: any) => (
        <div key={post.id} className="mb-3">
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default Posts;