feat(zones): fetch base data and statistics separately

[ndv99]

⚠️ Proof of concept

This is an example of how we could fetch basic data from one endpoint, begin showing it in the table, and fetch additional data separately, displaying spinners in place.

To try this out for yourself:

1. Checkout this branch locally and run the UI
2. Go to the zones list
3. Open the react query dev tools (that little palm tree thingy in the bottom left corner)
4. Find "listZonesWithSummary" in the query list
5. Click "Trigger loading" in the actions page on the right to simulate the loading of the second query
6. You should see spinners in the devices, controllers, and machines columns
7. Click "Restore loading" to simulate query success
8. You should now see the number of devices, controllers, and machines for each zone

Loading state

Success state

[webteam-app]

Demo

Jenkins

demos.haus

[abuyukyi101198]

The enabled-chaining is something we already do, and I agree it'd be good the jot it down as common practice. The main change with this approach seems to be field-based loading spinners added to each column. Could there be a way we could standardize this chaining into a singular hook that would return an intermediate partial success state?

[ndv99]

The enabled-chaining is something we already do, and I agree it'd be good the jot it down as common practice. The main change with this approach seems to be field-based loading spinners added to each column. Could there be a way we could standardize this chaining into a singular hook that would return an intermediate partial success state?

I'm sure we could encapsulate it in a hook. My first thought is that hooks like these should live next to the view in which they're used in a hooks.ts file, since they're more of an abstraction from the API than the hooks in src/app/api/query.

I think it might also be worth looking at exposing useQuery options directly in each query hook. It's probably quite likely that we'll encounter cases where we want to set different query options (like enabled or refetchInterval differently, depending on where/how they are consumed. I tried giving this a go while writing this PR but was struggling with some type errors