Give visual feedback when reloading the schema

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -123,6 +123,7 @@ export interface State {
   tracingSupported?: boolean
   queryVariablesActive: boolean
   endpointUnreachable: boolean
+  isReloadingSchema: boolean
 }
 
 export interface SimpleProps {
@@ -138,7 +139,7 @@ export interface ToolbarButtonProps extends SimpleProps {
 export class GraphQLEditor extends React.PureComponent<
   Props & LocalThemeInterface & ReduxProps,
   State
-> {
+  > {
   static Logo: (props: SimpleProps) => JSX.Element
   static Toolbar: (props: SimpleProps) => JSX.Element
   static Footer: (props: SimpleProps) => JSX.Element
@@ -190,10 +191,10 @@ export class GraphQLEditor extends React.PureComponent<
       props.storage || typeof window !== 'undefined'
         ? window.localStorage
         : {
-            setItem: () => null,
-            removeItem: () => null,
-            getItem: () => null,
-          }
+          setItem: () => null,
+          removeItem: () => null,
+          getItem: () => null,
+        }
 
     // Determine the initial query to display.
     const query =
@@ -217,10 +218,10 @@ export class GraphQLEditor extends React.PureComponent<
       props.operationName !== undefined
         ? props.operationName
         : getSelectedOperationName(
-            null,
-            this.storageGet('operationName'),
-            queryFacts && queryFacts.operations,
-          )
+          null,
+          this.storageGet('operationName'),
+          queryFacts && queryFacts.operations,
+        )
 
     let queryVariablesActive = this.storageGet('queryVariablesActive')
     queryVariablesActive =
@@ -253,6 +254,7 @@ export class GraphQLEditor extends React.PureComponent<
       selectedVariableNames: [],
       queryVariablesActive,
       endpointUnreachable: false,
+      isReloadingSchema: false,
       ...queryFacts,
     }
 
@@ -272,7 +274,7 @@ export class GraphQLEditor extends React.PureComponent<
 
     // Utility for keeping CodeMirror correctly sized.
     this.codeMirrorSizer = new CodeMirrorSizer()
-    ;(global as any).g = this
+      ; (global as any).g = this
   }
 
   componentWillReceiveProps(nextProps) {
@@ -503,6 +505,7 @@ export class GraphQLEditor extends React.PureComponent<
             onClickShare={this.props.onClickShare}
             sharing={this.props.sharing}
             onReloadSchema={this.reloadSchema}
+            isReloadingSchema={this.state.isReloadingSchema}
             fixedEndpoint={this.props.fixedEndpoint}
             endpointUnreachable={this.state.endpointUnreachable}
           />
@@ -564,13 +567,13 @@ export class GraphQLEditor extends React.PureComponent<
                     onRunQuery={this.handleEditorRunQuery}
                   />
                 ) : (
-                  <VariableEditor
-                    ref={this.setVariableEditorComponent}
-                    value={this.props.session.headers}
-                    onEdit={this.props.onChangeHeaders}
-                    onRunQuery={this.handleEditorRunQuery}
-                  />
-                )}
+                    <VariableEditor
+                      ref={this.setVariableEditorComponent}
+                      value={this.props.session.headers}
+                      onEdit={this.props.onChangeHeaders}
+                      onRunQuery={this.handleEditorRunQuery}
+                    />
+                  )}
               </div>
               <QueryDragBar ref={this.setQueryResizer} />
             </div>
@@ -667,7 +670,7 @@ export class GraphQLEditor extends React.PureComponent<
       .join(' ')
     return `curl '${
       this.props.session.endpoint
-    }' ${headersString} --data-binary '${data}' --compressed`
+      }' ${headersString} --data-binary '${data}' --compressed`
   }
 
   setQueryVariablesRef = ref => {
@@ -757,14 +760,26 @@ export class GraphQLEditor extends React.PureComponent<
   // Private methods
 
   public reloadSchema = async () => {
-    const result = await this.props.schemaFetcher.refetch(
-      this.props.session.endpoint || this.props.endpoint,
-      this.convertHeaders(this.props.session.headers),
-    )
-    if (result) {
-      const { schema } = result
-      this.setState({ schema })
-      this.renewStacks(schema)
+    try {
+      this.setState({ isReloadingSchema: true })
+      const result = await this.props.schemaFetcher.refetch(
+        this.props.session.endpoint || this.props.endpoint,
+        this.convertHeaders(this.props.session.headers),
+      )
+      if (result) {
+        const { schema } = result
+        this.setState({
+          schema,
+          isReloadingSchema: false,
+          endpointUnreachable: false,
+        })
+        this.renewStacks(schema)
+      }
+    } catch (e) {
+      this.setState({
+        isReloadingSchema: false,
+        endpointUnreachable: true,
+      })
     }
   }
 
@@ -799,9 +814,9 @@ export class GraphQLEditor extends React.PureComponent<
 
     this.props.schemaFetcher
       .fetch(
-        this.props.session.endpoint || this.props.endpoint,
-        this.convertHeaders(this.props.session.headers),
-      )
+      this.props.session.endpoint || this.props.endpoint,
+      this.convertHeaders(this.props.session.headers),
+    )
       .then(result => {
         if (result) {
           const { schema, tracingSupported } = result
@@ -1290,11 +1305,11 @@ const DragBar = styled.div`
   cursor: col-resize;
 `
 
-const QueryDragBar = styled(DragBar)`
+const QueryDragBar = styled(DragBar) `
   right: 0px;
 `
 
-const ResultDragBar = styled(DragBar)`
+const ResultDragBar = styled(DragBar) `
   left: 0px;
   z-index: 1;
 `

packages/graphql-playground-react/src/components/Playground/TopBar/ReloadIcon.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react'
+import { styled, keyframes, withProps } from '../../../styled/index'
+import * as theme from 'styled-theming'
+
+export interface Props {
+  isReloadingSchema: boolean
+  onReloadSchema?: () => void
+}
+
+export default class ReloadIcon extends React.Component<Props, {}> {
+  render() {
+    return (
+      <Positioner onClick={this.props.onReloadSchema}>
+        <Svg viewBox="0 0 20 20">
+          <Circle
+            cx="9.5"
+            cy="10"
+            r="6"
+            strokeWidth="1.5"
+            fill="none"
+            strokeLinecap="round"
+            isReloadingSchema={this.props.isReloadingSchema}
+          />
+          <Icon
+            d="M4.83 4.86a6.92 6.92 0 0 1 11.3 2.97l.41-1.23c.13-.4.56-.6.95-.47.4.13.6.56.47.95l-1.13 3.33a.76.76 0 0 1-.7.5.72.72 0 0 1-.43-.12l-2.88-1.92a.76.76 0 0 1-.2-1.04.75.75 0 0 1 1.03-.2l1.06.7A5.34 5.34 0 0 0 9.75 4.5a5.44 5.44 0 0 0-5.64 5.22 5.42 5.42 0 0 0 5.24 5.62c.41 0 .74.36.72.78a.75.75 0 0 1-.75.72H9.3a6.9 6.9 0 0 1-6.68-7.18 6.88 6.88 0 0 1 2.22-4.81z"
+            isReloadingSchema={this.props.isReloadingSchema}
+          />
+        </Svg>
+      </Positioner>
+    )
+  }
+}
+
+const iconColor = theme('mode', {
+  light: p => p.theme.colours.darkBlue20,
+  dark: p => p.theme.colours.white20,
+})
+
+const iconColorHover = theme('mode', {
+  light: p => p.theme.colours.darkBlue60,
+  dark: p => p.theme.colours.white60,
+})
+
+const refreshFrames = keyframes`
+0% {
+  transform: rotate(0deg);
+  stroke-dashoffset: 7.92;
+} 
+
+50% {
+  transform: rotate(720deg);
+  stroke-dashoffset: 37.68;
+} 
+
+100% {
+  transform: rotate(1080deg);
+  stroke-dashoffset: 7.92;
+}
+`
+
+// same result for these 2 keyframes, however when the props change
+// it makes the element animated with these keyframes to trigger
+// again the animation
+const reloadAction = props => keyframes`
+0% {
+  transform: rotate(${props.isReloadingSchema ? 0 : 360}deg);
+}
+
+100% {
+  transform: rotate(${props.isReloadingSchema ? 360 : 720}deg);
+}`
+
+const Positioner = styled.div`
+  position: absolute;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  transform: rotateY(180deg);
+`
+
+const Svg = styled.svg`
+  fill: ${iconColor};
+  transition: 0.1s linear all;
+
+  &:hover {
+    fill: ${iconColorHover};
+  }
+`
+
+const Circle = withProps<Props>()(styled.circle) `
+  fill: none;
+  stroke: ${iconColor};
+  stroke-dasharray: 37.68;
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${p => p.isReloadingSchema ? 1 : 0};
+  transform-origin: 9.5px 10px;
+  animation: ${refreshFrames} 2s linear infinite;
+`
+
+const Icon = withProps<Props>()(styled.path) `
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${p => p.isReloadingSchema ? 0 : 1};
+  transform-origin: 9.5px 10px;
+  animation: ${reloadAction} 0.5s linear;
+`

packages/graphql-playground-react/src/components/Playground/TopBar/TopBar.tsx

@@ -4,6 +4,8 @@ import * as theme from 'styled-theming'
 import { darken, lighten } from 'polished'
 import * as CopyToClipboard from 'react-copy-to-clipboard'
 import Share, { SharingProps } from '../../Share'
+import ReloadIcon from './ReloadIcon'
+import { StyledComponentClass } from 'styled-components'
 import { keyframes, StyledComponentClass } from 'styled-components'
 import { Icon } from 'graphcool-styles'
 import * as cx from 'classnames'
@@ -17,6 +19,7 @@ export interface Props {
   curl: string
   onClickShare?: () => void
   onReloadSchema?: () => void
+  isReloadingSchema: boolean
   sharing?: SharingProps
   fixedEndpoint?: boolean
   endpointUnreachable: boolean
@@ -44,13 +47,11 @@ export default class TopBar extends React.Component<Props, {}> {
               <Spinner />
             </ReachError>
           ) : (
-            <ReloadIcon
-              src={require('graphcool-styles/icons/fill/reload.svg')}
-              width={20}
-              height={20}
-              onClick={this.props.onReloadSchema}
-            />
-          )}
+              <ReloadIcon
+                isReloadingSchema={this.props.isReloadingSchema}
+                onReloadSchema={this.props.onReloadSchema}
+              />
+            )}
         </UrlBarWrapper>
         <CopyToClipboard text={this.props.curl}>
           <Button>Copy CURL</Button>
@@ -100,16 +101,6 @@ const fontColor = theme('mode', {
   dark: p => p.theme.colours.white60,
 })
 
-const iconColor = theme('mode', {
-  light: p => p.theme.colours.darkBlue20,
-  dark: p => p.theme.colours.white20,
-})
-
-const iconColorHover = theme('mode', {
-  light: p => p.theme.colours.darkBlue60,
-  dark: p => p.theme.colours.white60,
-})
-
 const barBorder = theme('mode', {
   light: p => p.theme.colours.darkBlue20,
   dark: p => '#09141c',
@@ -176,6 +167,18 @@ const ReachError = styled.div`
   color: #f25c54;
 `
 
+
+const Spinner = styled.div`
+  & {
+    width: 40px;
+    height: 40px;
+    margin: 40px auto;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
+    animation: sk-pulseScaleOut 1s infinite ease-in-out;
+`
+
 const ReloadIcon = styled(Icon)`
   position: absolute;
   right: 5px;