Validator dashboard remaining work

[thesan]

Context

> Design

Following #4718 there are a few issues remaining with the validator dashboard:

1. Queries are broken by the Api proxy

This is why the #4718 preview is missing a lot data on each validator.
However this preview where the proxy has been disable should show all the data.

2. The dashboard header causes endless re-renders

This does not happen with the Api proxy but it's probably because some of the header queries (in useStakingStatistics) fail for the same reasons ☝️. Without the proxy the constant re-renders make the page unusable.

I think there's several issues in useStakingStatistics

1. All the queries are subscribed to with useObservable: as a result they remain open. I think not all of them need to stay subscribed to. For these useFirstObservableValue is enough.
2. The result of a useObservable is used as a dependency for another useObservable. This will cause the second query to get unsubscribed and resubscribed to, which should be avoided.
3. The era statistic precision is a minute so I don't think synchronizing with the exact time from the chain with query.timestamp.now is necessary. Date.now and setInterval should be good enough.
4. Finally that's a detail but eraDuration is a constant so no need to return it in the hook result.

There might be other causes for the issue but I think that's a good start.

3. Sort by APR should be re-implemented

I think that's an important feature but I removed it in #4718 because it's a bit trickier to implement with the pagination.

I think the only way to implement this is to fetch details on all the validators when the sort by APR is set. So maybe there should be a loading animation the first time the sort happens.

4. Loading animation should be skeletons instead of spinners

This would be nice for consistency.

Scope

• Validator dashboard: Queries are broken by the Api proxy #4723
• Validator dashboard: Header causes endless re-renders #4724
• Validator dashboard: Sort by APR should be re-implemented #4725
• Validator dashboard: Loading animation should be skeletons instead of spinners #4726

@eshark9312 I'll get started with #4723 (I'm not sure how long it will take), could you work on one of the other issues please ?

To work on #4724 and #4725 you will needed to set DISABLE_PROXY_API=true in packages/ui/.env (or manually run DISABLE_PROXY_API=true yarn start every time). You'll know if it works by checking the data in the list. It should look like this: