Graphql-playground: Visual indicator when schema was reloaded

[schickling]

Visual feedback is one of the most important components to a great UX. When developing a GraphQL server, you're changing your schema quite often. This workflow is being steadily improved by allowing CMD + R to reload the schema (#180) and even automatic schema reloads based on filewatching via graphqlconfig (#331).

I suggest to introduce a nice visual animation (some sort of pulse & rotation - maybe even colored) when the schema has been reloaded.

@xavcz maybe you have some idea how we could design/implement this? 👨‍🎨

[huv1k]

I was thinking maybe do something like Firefox quantum is doing with reload and maybe just small popup in bottom to just alert that schema was reloaded. Something like hyper is doing with new version.

[xavxyz]

Visual feedback is one of the most important components to a great UX.

:100: yay, I'm going to give it a try!

[xavxyz]

Here is what I came up with so far:

Live prototype here: https://framer.cloud/iGRSF

What do you think?

Considering the implementation, React state + CSS keyframes with styled-components? 🎨 🖌

[kbrandwijk]

@xavcz I love the visuals, and they are a very valuable addition to actually see that something is happening when you push that reload button. But as soon as the reload is done there's no trace that it ever happened.

I think a more permanent indication of schema reload (last updated ...) might be needed in addition to these visual aids.

[schickling]

Hi @xavcz! Thanks a lot for your suggestion! I really like the general idea but think replacing the icon with the GraphQL logo is a bit "overkill". I'd rather expect the reload button to turn into some kind of rotating reload animation (like the one on the bottom right). What do you think?

Regarding @kbrandwijk remark. How about displaying a little notification dot (similar how the Twitter feed does it) next to the reload icon which is there until you change/run a query.

[xavxyz]

Aaaah, "simplicity is the ultimate sophistication". Thanks for the feedbacks and making me get down on the ground!

👌, stay tuned

[xavxyz]

Better late than never

My bad for the delay, simple PR opened with some questions/comments!

[timsuchanek]

Awesome! Will look into it :)