Await component

[MrFlashAccount]

Pull Request Description

This PR adds an <Await /> component, that allows to trigger Suspense inside the component

const {promise} = useQuery({queryKey: ['data'], queryFn: fetchData})

// Will trigger the suspense within this component
// And once the promise resolves, call the children with the data
// unlike regular approach like `return isLoading ? <Loader /> : <div>{data}</div>`
// it doesn't lead to waterfall of loaders and tell React to keep the tree suspended
// So we always have a single loader, which improves the UX
<Await promise={promise}>
   {(data) => <div>{data}</div>}
</Await>

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  TypeScript,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• Unit tests have been written where possible.
• If meaningful changes were made to logic or tests affecting Enso Cloud integration in the libraries,
  or the Snowflake database integration, a run of the Extra Tests has been scheduled.
  • If applicable, it is suggested to paste a link to a successful run of the Extra Tests.

[github-actions]

🧪 Storybook is successfully deployed!

📊 Dashboard:

• 👀 Review changes: https://www.chromatic.com/build?appId=673738989fc3e8430364197e&number=812
• 👨‍🎨 Preview storybook: https://673738989fc3e8430364197e-whpbidelae.chromatic.com/

[somebody1234]

CR ✅

logic for Await.tsx looks a little scuffed but it's understandable why it's done that way, and if it works it works...

... although i guess having a global WeakMap is a little less cursed, although it will require type assertions

[MrFlashAccount]

logic for Await.tsx looks a little scuffed but it's understandable why it's done that way, and if it works it works...

What exactly is unclear? Maybe I should provide extra comments to address your questions

I agree on using WeakMaps, it's an alternative solution. If you wish I'll reimplement this using WeakMap, I anyway will add some tests before merging it

[MrFlashAccount]

@Frizi I bumped the @tanstack/vue-query alongside with @tanstack/react-query to get access to promise field in render. Please take a look