Implement Loading States & Error Screen

[hochiw]

• Loading state for chain status
• Loading state for community status Need generic error screen?

https://github.com/oursky/likedao/pull/22#discussion_r874519673

[mitchellchou]

1. Loading state(let's use spinner): https://www.figma.com/file/SMaKDFUALEopfVeDHcBemr/DAO-likecoin?node-id=1095%3A7327
2. generic error screen: https://www.figma.com/file/SMaKDFUALEopfVeDHcBemr/DAO-likecoin?node-id=1095%3A6664

[hochiw]

@mitchellchou @frank-oursky A few cases that might require alternative design

1. Do we show spinner for this component as well?
2. And when the chain status fails to load we would still want to show the rest of the content since there is no dependency between the sidebar and the main content?
3. When the main content fails to load do we show the error screen and the side bar at the same time? For the same reason as 2

[koskosm]

@hochiw I added yellow dot and changed label to [networkname] connecting : https://www.figma.com/file/SMaKDFUALEopfVeDHcBemr/DAO-likecoin?node-id=1459%3A6267

For failed loading case if content able to load is ok, but I think will need to show error toast every time in new pages, maybe the toast message should be "Failed to connect to [networkname], please try again later. See what do you think about this approach or if this make sense, if not I could add a blocking screen for this.

[hochiw]

@frank-oursky I think toast is okay, but we will just leave the page blank if can't load the main content right?

[koskosm]

I think its fine if error couldn't load content

[hochiw]

@frank-oursky i think we might want to use something like a gray dot for the loading state of chain switcher component since yellow is already used to indicate the congested state, is that alright?

[koskosm]

@hochiw no problem