feat(TopBar): animate the icon when reloading schema

Author: xavxyz

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 {
@@ -503,6 +504,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}
           />
@@ -757,14 +759,19 @@ 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 })
+        this.renewStacks(schema)
+      }
+    } catch (e) {
+      this.setState({ isReloadingSchema: false })
     }
   }
 

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

@@ -0,0 +1,110 @@
+import * as React from 'react'
+import { styled, keyframes } from '../../../styled/index'
+import * as theme from 'styled-theming'
+import { StyledComponentClass } from 'styled-components'
+
+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 showWhenReloading = bool => props =>
+  props.isReloadingSchema ? Number(bool) : Number(!bool)
+
+const Circle: StyledComponentClass<any, any, any> = styled.circle`
+  fill: none;
+  stroke: ${iconColor};
+  stroke-dasharray: 37.68;
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${showWhenReloading(true)};
+  transform-origin: 9.5px 10px;
+  animation: ${refreshFrames} 2s linear infinite;
+`
+
+const Icon: StyledComponentClass<any, any, any> = styled.path`
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${showWhenReloading(false)};
+  transform-origin: 9.5px 10px;
+  animation: ${reloadAction} 0.5s linear;
+`

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

@@ -4,8 +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 { Icon } from 'graphcool-styles'
 import * as cx from 'classnames'
 
 export interface Props {
@@ -17,6 +17,7 @@ export interface Props {
   curl: string
   onClickShare?: () => void
   onReloadSchema?: () => void
+  isReloadingSchema: boolean
   sharing?: SharingProps
   fixedEndpoint?: boolean
   endpointUnreachable: boolean
@@ -45,10 +46,8 @@ export default class TopBar extends React.Component<Props, {}> {
             </ReachError>
           ) : (
             <ReloadIcon
-              src={require('graphcool-styles/icons/fill/reload.svg')}
-              width={20}
-              height={20}
-              onClick={this.props.onReloadSchema}
+              isReloadingSchema={this.props.isReloadingSchema}
+              onReloadSchema={this.props.onReloadSchema}
             />
           )}
         </UrlBarWrapper>
@@ -100,16 +99,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',
@@ -172,19 +161,6 @@ const ReachError = styled.div`
   color: #f25c54;
 `
 
-const ReloadIcon = styled(Icon)`
-  position: absolute;
-  right: 5px;
-  cursor: pointer;
-  svg {
-    fill: ${iconColor};
-    transition: 0.1s linear all;
-    &:hover {
-      fill: ${iconColorHover};
-    }
-  }
-` as any // TODO remove this once typings are fixed
-
 const Spinner = styled.div`
   & {
     width: 40px;