Handling multiple suspense/awaits in a clean way?

[frigid meteor]

Any suggestions on a better way of handling multiple defer properties would be greatly appreciated, I'm not a fan of this at the moment.

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const userPromise = getUserAndCurrentTeam(request);
  const teamsPromise = getAllTeams(request);

  return defer({
    user: userPromise,
    teams: teamsPromise,
  });
};

<Suspense fallback={<p>Loading teams...</p>}>
  <Await resolve={teams}>
    {(resolvedTeams) => (
      <Suspense fallback={<p>Loading user...</p>}>
        <Await resolve={user}>
          {(resolvedUser) => (
          )}
        </Await>
      </Suspense>
    )}
  </Await>
</Suspense>

[ancient kettle]

This is the simplest way, in case you don't need individual loading messages.

return defer({
  stuff: Promise.all([userPromise, teamsPromise])
});

[frigid meteor]

Yeah, I did have a think about that but wondered if there was a way to keep user and teams as the primary exports there, but I guess not, and would have to wrap them with a data promise and then call them through that. Thanks!