Merge branch 'master' into feedback-on-reload-schema

Author: timsuchanek

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

@@ -6,6 +6,8 @@ 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'
 
 export interface Props {
@@ -104,6 +106,11 @@ const barBorder = theme('mode', {
   dark: p => '#09141c',
 })
 
+const spinnerColor = theme('mode', {
+  light: p => p.theme.colours.black40,
+  dark: p => p.theme.colours.white30,
+})
+
 export const Button: StyledComponentClass<any, any, any> = styled.button`
   text-transform: uppercase;
   font-weight: 600;
@@ -127,8 +134,7 @@ export const Button: StyledComponentClass<any, any, any> = styled.button`
 const TopBarWrapper = styled.div`
   display: flex;
   background: ${backgroundColor};
-  padding: 10px;
-  padding-bottom: 4px;
+  padding: 10px 10px 4px;
   align-items: center;
 `
 
@@ -161,6 +167,7 @@ const ReachError = styled.div`
   color: #f25c54;
 `
 
+
 const Spinner = styled.div`
   & {
     width: 40px;
@@ -170,29 +177,60 @@ const Spinner = styled.div`
     border-radius: 100%;
     -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
     animation: sk-pulseScaleOut 1s infinite ease-in-out;
-  }
+`
 
-  @-webkit-keyframes sk-pulseScaleOut {
-    0% {
-      -webkit-transform: scale(0);
-      transform: scale(0);
-    }
-    100% {
-      -webkit-transform: scale(1);
-      transform: scale(1);
-      opacity: 0;
+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
 
-  @keyframes sk-pulseScaleOut {
-    0% {
-      -webkit-transform: scale(0);
-      transform: scale(0);
-    }
-    100% {
-      -webkit-transform: scale(1);
-      transform: scale(1);
-      opacity: 0;
-    }
+const bounceAnimation = keyframes`
+  0%, 100% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
   }
 `
+
+const Pulse = styled.div`
+  width: 16px;
+  height: 16px;
+  background-color: ${spinnerColor};
+  border-radius: 100%;
+  animation: ${bounceAnimation} 2s infinite ease-in-out;
+  -webkit-animation: ${bounceAnimation} 2s infinite ease-in-out;
+`
+
+const DelayedPulse = styled.div`
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 0;
+  background-color: ${spinnerColor};
+  border-radius: 100%;
+  animation: ${bounceAnimation} 2s infinite ease-in-out;
+  -webkit-animation: ${bounceAnimation} 2s infinite ease-in-out;
+  animation-delay: -1s;
+  -webkit-animation-delay: -1.0s;
+`
+
+const SpinnerWrapper = styled.div`
+  position: relative;
+  margin: 6px;
+`
+
+const Spinner = () => (
+  <SpinnerWrapper>
+    <Pulse />
+    <DelayedPulse />
+  </SpinnerWrapper>
+)