I've got this as my page component

export default async function ProfilePage({ params }: ProfilePageProps) {
  const profile = await api.user.getUserProfileByUsername.query({
    username: params.username,
  });

  return (
    <div className=" mx-auto flex flex-col gap-4 text-center">
      <ProfileHeader />
      {profile.isOwnProfile && <Toolbar />}
      <ul className="flex flex-col gap-2 px-1 sm:px-8">
        <UserSelectionsList />
      </ul>
    </div>
  );
}

and I don't want to use suspense on the profile header (as soon as the profileheader has loaded, i want to server the page to the user), however, I do want to stream in the data that UserSelectionsList needs. My attempt at this was

const UserSelectionsList = async () => {
  const selections = await new Promise((resolve) =>
    setTimeout(resolve, 2000),
  ).then(() => api.fighter.getAllFighters.query());
  if (!selections.length) return <p>{"Couldn't find any fighters"}</p>;

  return (
    <Suspense fallback={<Loading />}>
      {selections.map((f) => (
        <FighterCard fighter={f} key={f.id} />
      ))}
    </Suspense>
  );
};

(the Promise is for an intentional delay for dev). The issue is that this renders my fallback for the entire page. Is there a way to avoid this?

The workaround I found is to extract the profile data/markup into layout.tsx but this feels bad from a design perspective to me.. this UI is not "layout" UI really. It's specific to the page. Can I get around this and only stream in part of the page?