show circular spinner when retrieving weather

src/components/LoadingSpinner/LoadingSpinner.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import CircularProgress from 'material-ui/CircularProgress';
+import { palette } from 'styles/muiTheme';
 
 const LoadingSpinner = (props) => (
   <CircularProgress
-    style={props.style || {marginLeft: '50%'}}
-    color={props.color}
-    size={props.size || .5}
+    style={props.style || {}}
+    color={props.color || palette.primary3Color}
+    size={props.size || 32}
   />
 );
 

src/components/LoadingSpinner/LoadingSpinner.story.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import LoadingSpinner from './LoadingSpinner';
+
+storiesOf('LoadingSpinner', module)
+  .add('default', () => (
+    <LoadingSpinner />
+  ));

src/routes/Dashboard/components/ForecastTile/ForecastTile.jsx

@@ -8,6 +8,7 @@ import {
   TableRow,
   TableRowColumn,
 } from 'material-ui/Table';
+import LoadingSpinner from 'components/LoadingSpinner';
 
 const styles = {
   wrapper: {
@@ -28,7 +29,7 @@ const styles = {
 // Use named export for unconnected component (for tests)
 const ForecastTile = ({ weather }) => {
   if (!weather) {
-    return (<div>Please wait...</div>);
+    return (<div style={{ textAlign: 'center' }}><LoadingSpinner size={60} /></div>);
   }
 
   return (<Table wrapperStyle={styles.wrapper}>

src/routes/Dashboard/components/Map/PopUpCard/ShipmentCard/ShipmentCard.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { getWeatherObservations } from 'routes/Dashboard/modules/Dashboard';
+import LoadingSpinner from 'components/LoadingSpinner';
 import classes from '../PopUpCard.scss';
 
 const timeFormat = 'MMM Do, h:mm a';
@@ -67,7 +68,10 @@ export class ShipmentCard extends React.PureComponent {
         <div className={classes.subtitle}>
           Current Weather
         </div>
-        <div>{currentLocation.weather ? currentLocation.weather.observation.wx_phrase : 'N/A' }
+        <div>
+          {currentLocation.weather ?
+           currentLocation.weather.observation.wx_phrase :
+           (<div style={{ textAlign: 'center' }}><LoadingSpinner size={60} /></div>)}
         </div>
       </div>
     );