Suspense in NextJS in production is blocking rather than showing fallback UI

Question

I have tried following the docs and tutorials to implement streaming in my project. To visualize it in development I've added artificial delays to my API calls to trigger the fallback loading UI. In development it works but in production it just blocks the call until the data is loaded.

// app/dashboard/page.js

import { Suspense } from 'React'
import TestComponent from './testComponent'

const Dashboard = () => {

 return (
  <div>
   <Suspense fallback={<div>Loading...</div>}>
    <TestComponent />
   </Suspense>
  </div>
 )
}

and

// app/dashboard/testComponent

const TestComponent = async () => {
 const fetchDataWithDelay = () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
   cache: "no-store",
  });
  const data = await res.json();

  return new Promise((resolve) => {
   setTimeout(() => {
    resolve(data);
   }, 4000);
  });
 }

 const data = await fetchDataWithDelay();

 return (
  <ul>
   {data.map((d)=>(
    <li key={d.id}>
     <p>{d.title}</p>
     <p>{d.body}</p>
    </li>
   ))}
  </ul>
 )
}

The artificial delay is blocking the request for 4000ms rather than loading the page and displaying the loading fallback. I also tried using the loading.js page to see if that works and it's the same issue.

Futhermore I've replicated this with a small production app to show none of the expected methods work as expected.

Github link: https://github.com/Frost7994/app-suspense

Deployed link: https://app-suspense.vercel.app

any solutions to this?

As I have described above.