Add loading class, Odometer, and polling

Author: lorensr

src/components/StarCount.js

@@ -2,11 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
+import classNames from 'classnames'
+import Odometer from 'react-odometerjs'
 
 const StarCount = ({ githubStars, loading }) => {
   return (
-    <a className="StarCount" href="https://github.com/GraphQLGuide/guide">
-      {githubStars}
+    <a
+      className={classNames('StarCount', { loading })}
+      href="https://github.com/GraphQLGuide/guide"
+    >
+      {githubStars && <Odometer value={githubStars} />}
     </a>
   )
 }
@@ -23,7 +28,7 @@ const STARS_QUERY = gql`
 `
 
 export default () => (
-  <Query query={STARS_QUERY}>
+  <Query query={STARS_QUERY} pollInterval={5 * 1000}>
     {({ data: { githubStars }, loading }) => (
       <StarCount githubStars={githubStars} loading={loading} />
     )}