page

export default async function Customers() {
  return (
            <Suspense fallback={<SkeletonTable/>}>
              <CustomersList />
            </Suspense>
    ...

export default async function CustomersList() {
  const { customers } = await getCustomersWithServicesHistory();

  return (
    <tbody>
      {customers && customers.length > 0 ? (
        customers.map((customer) => (
          <CustomerRow key={customer.id} customer={customer} />
        ))
      ) : (
        <tr>
          <td >
            No customers found
          </td>
        </tr>
      )}
    </tbody>
  );

my layout

export const expirimental_ppr = true;
export default async function CustomersLayout({ children }) {
  return (
    <CustomersProvider >
      {children}
      <CustomerViewDetailsModal />
    </CustomersProvider>
  );
}

my supabase call

export async function getCustomersWithServicesHistory() {
  const { user, supabase } = await getAuthenticatedUser();
  const { officeId } = await getUsersData(user, supabase);
  await new Promise((resolve) => setTimeout(resolve, 5000));

  return unstable_cache(
    async () => {
      const { data: customers, error: customersError } =
        await getCustomersWithServicesQuery(supabase, officeId);

      if (customersError) {
        console.error("Supabase error:", customersError);
        return { error: customersError?.message };
      }

      return { customers };
    },
    [`customers-with-services-history-${officeId}`],
    {
      tags: [`customers-${officeId}`, `services-history-${officeId}`],
      revalidate: 60,
    }
  )();
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /activity
├ ƒ /api/auth/signout
├ ○ /calendar
├ ƒ /customers
├ ƒ /dashboard
├ ○ /error
├ ƒ /history/[id]
├ ○ /login
├ ƒ /services
└ ƒ /settings


ƒ Middleware

○ (Static) prerendered as static content
ƒ (Dynamic) server-rendered on demand

Is there any reason why my page is not partially rendered?