[UI v2] feat: Loads data and url state to concurrency limit route for UX to consume

[devinvillarosa]

This PR focuses on passing data from react query cache and url state into the route component, which will be consumed by the page component

1. Add a useSuspenseQuery wrapper.
2. Adds search validator and loader to route and UX component

Screen.Recording.2024-12-05.at.4.24.30.PM.mov

Checklist

• This pull request references any related issue by including "closes <link to issue>"
  • If no issue exists and your change is not a small fix, please create an issue first.
• If this pull request adds new functionality, it includes unit tests that cover the changes
• If this pull request removes docs files, it includes redirect settings in mint.json.
• If this pull request adds functions or classes, it includes helpful docstrings.

Related to #15512

[devinvillarosa]

ended up using this .loader style for consistency with Variable.

But one principal I'm trying to keep in mind is

How do we keep our server data reusable throughout the webapp as it grows and evolve?

I think only exposing queryOptions and mutations exposed to the webapp gives this flexibility because you can feed it into different loaders, useQuery, useQueries, useSuspenseQuery, and useSuspenseQueries for different scenarios.

But let keep building more stuff to see some similar patterns

[desertaxle]

We could end up with multiple entry points. In most cases, you can use the prebuilt hooks (a la useVariables), but developers can import and use the query options factory in cases where more customization is needed.

[devinvillarosa]

Couldn't get <Link> to style correctly when wrapping over TabsTrigger.

Opting to use navigation for now, even though semantics is a bit off

[desertaxle]

LGTM!