Give visual feedback when reloading the schema #516
Conversation
| this.renewStacks(schema) | ||
| } | ||
| } catch (e) { | ||
| this.setState({ isReloadingSchema: false }) |
There was a problem hiding this comment.
What about showing some feedback when reloading the schema fails?
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.
Something like a red dot? 🔴
With maybe a tooltip saying "schema couldn't be reloaded because xyz"?
We could reuse the endpointUnreachable state?
There was a problem hiding this comment.
Yes, we can reuse that state for this purpose.
xavxyz
changed the title
| ` | ||
|
|
||
| const showWhenReloading = bool => props => | ||
| props.isReloadingSchema ? Number(bool) : Number(!bool) |
There was a problem hiding this comment.
Weird workaround, I got a TS error I couldn't solve by doing:
const Element: StyledComponentClass<any, any, any> = styled.xyz`
/* ... */
opacity: ${props => props.isReloadingSchema ? 1 : 0};
`I've tried to type elements props in place of the first & last any but didn't work 🤐
There was a problem hiding this comment.
I'm right now merging in a styled components PR and include a withProps function that will help with this.
You will be able to use the withProps function like this:
import { styled, withProps } from '../styled/styled-components'
export interface Props {
center?: boolean
}
export const P = withProps<Props>()(styled.div)`
display: inline-block;
font-size: 14px;
text-align: ${p => (p.center ? 'center' : 'left')};
`I will notify you when it's ready!
There was a problem hiding this comment.
withProps just arrived, you can import it from here: https://github.com/graphcool/graphql-playground/blob/master/packages/graphql-playground-react/src/styled/styled.ts
|
Looks good 😊 |
|
Right now, schema changes are not broadcasted, that's a separate issue. We could get that information in the electron app by listening to the local changes of a project. |
|
OMG. This looks awesome! |
xavxyz
force-pushed
the
feedback-on-reload-schema
branch
from
18456eb to
87325f6
Compare
It depends on state.unreachableEndpoint, also used when sending the introspection query
…chable + use sc/keyframes for the pulsing component: styled-components auto-prefix animations to be cross-browser 😊
…is unreachable" This reverts commit 19b90a4.
|
I had to do a small merge back from master, but it looks good so far, waiting for the build to succeed now. |
|
I meant coupling the 🍡 |
|
Wouldn't it be more consistent to just keep your work over mine now? The spinner you made is visible whenever the schema is reloading. When it fails to reach the server endpoint, the reason why there's a spinner is because it continues to try to fetch the schema until it succeeds. Therefore, it doesn't make a lot of sense to have two different spinners for the same underlying action? |
Nice, I didn't know that! Makes sense to only show one, you're right. |
Changes proposed in this pull request:
Simple animation on the reload icon when the schema is reloading (↔
GraphQLEditor'sonReloadmethod is triggered)Two SVG elements instead of the
graphcool-stylesSVG icon: when not reloading, show the icon, when reloading, show a spinnerQuestions
Where are schema changes broadcasted? I'd love to listen to it and thus providing feedback but I couldn't find the code 🙈