Fixed unreachable endpoint spinner size

[Weakky]

Fixes #499 .

Changes proposed in this pull request:

• Reduced the size of the 'unreachable endpoint' loading spinner to match the mockup.

IMO, it looks very tiny now though, especially with the fade-out effect while it grows.

[CLAassistant]

All committers have signed the CLA.

[timsuchanek]

Thanks for the PR!
It is indeed pretty tiny and not really visible like this.
2 things: Can you try to change the color from #333 to rgba(255,255,255,0.2)? Maybe 0.1, maybe 0.3.
And add another div with a delayed pulse. That should make it more visible.

[Weakky]

By another div, do you mean something like an inner/smaller pulse inside the bigger one ?

Something like the second spinner on this page: http://tobiasahlin.com/spinkit/

[timsuchanek]

Yes exactly what I mean. You also can use the second spinner from that page!

[Weakky]

Just pushed the changes you advised me. It currently looks like this.
The implementation with styled-components looks a bit heavy for me though.
Why can't we pass props through styled.div components ? I get insulted by Typescript trying to do so 🤕. I could have simplified it using a delay props on the <Pulse /> component, to conditionally set the animation-delay css instruction ?

Update: Nevermind, just saw your comment on #516. The implementation doesn't look any better anyway IMO. I have to mess with position depending on the props passed, and that looks terrible !

interface PulseProps {
  delay: boolean
}

const Pulse = withProps<PulseProps>()(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;
  animation-delay: ${p => p.delay ? '-1s' : '0s'};
  -webkit-animation-delay: ${p => p.delay ? '-1s' : '0s'};
  position: ${p => p.delay ? 'absolute' : 'relative'};
  top: 0;
`

const SpinnerWrapper = styled.div`
  position: relative;
  margin: 6px;
`

const Spinner = () => (
  <SpinnerWrapper>
    <Pulse delay={false} />
    <Pulse delay={true} />
  </SpinnerWrapper>
)

[timsuchanek]

Thanks for the PR! The playground gets better and better with PRs like this 👍