Hello, im really new to nextjs trying to learn it this is my users/page.tsx:

import React, { Suspense } from 'react'
import UsersTable from './UsersTable'

interface Props {
  searchParams: { sortOrder: string }
}

const UsersPage = ({ searchParams: { sortOrder } }: Props) => {
  return (
    <>
      <h1>Users</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <UsersTable sortOrder={sortOrder} />
      </Suspense>
    </>
  )
}

export default UsersPage

this is my usersTable.tsx:

import Link from 'next/link';
import { sort } from 'fast-sort';

interface User {
    id: number;
    name: string;
    username: string;
    email: string;
}

interface Props {
    sortOrder: string;
}

const UsersTable = async ({ sortOrder }: Props) => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const users: User[] = await res.json();

    const sortedUsers = sort(users).asc(
        sortOrder === 'Email' 
        ? user => user.email
        : user => user.name
    );

    return (
        <long_html_here>
    )
}

export default UsersTable

my suspense:

 <Suspense fallback={<p>Loading...</p>}>
        <UsersTable sortOrder={sortOrder} />
</Suspense>

doesnt seem to be working, if i go to network tab i can see the server is sending the page with the table instead of Loading... but if i go to devtools componenets and force suspense i do see the loading, any idea why?