src/renderer/component/rewardSummary/index.js

@@ -1,10 +1,18 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
+import { selectUnclaimedRewardValue, selectFetchingRewards } from 'redux/selectors/rewards';
+import { doRewardList } from 'redux/actions/rewards';
 import RewardSummary from './view';
 
 const select = state => ({
   unclaimedRewardAmount: selectUnclaimedRewardValue(state),
+  fetching: selectFetchingRewards(state),
 });
 
-export default connect(select, null)(RewardSummary);
+const perform = dispatch => ({
+  fetchRewards: () => dispatch(doRewardList()),
+});
+
+export default connect(
+  select,
+  perform
+)(RewardSummary);

src/renderer/component/rewardSummary/view.jsx

@@ -2,20 +2,32 @@
 import * as React from 'react';
 import Button from 'component/button';
 import CreditAmount from 'component/common/credit-amount';
+import BusyIndicator from 'component/common/busy-indicator';
 
 type Props = {
   unclaimedRewardAmount: number,
+  fetching: boolean,
+  fetchRewards: () => void,
 };
 
-const RewardSummary = (props: Props) => {
-  const { unclaimedRewardAmount } = props;
+class RewardSummary extends React.Component<Props> {
+  componentDidMount() {
+    this.props.fetchRewards();
+  }
+
+  render() {
+    const { unclaimedRewardAmount, fetching } = this.props;
     const hasRewards = unclaimedRewardAmount > 0;
 
     return (
       <section className="card card--section">
-      <div className="card__title">{__('Rewards')}</div>
+        <div className="card__title">
+          {__('Rewards')}
+          {fetching && <BusyIndicator />}
+        </div>
         <p className="card__subtitle">
-        {hasRewards ? (
+          {!fetching &&
+            (hasRewards ? (
               <React.Fragment>
                 {__('You have')}
                 &nbsp;
@@ -27,7 +39,7 @@ const RewardSummary = (props: Props) => {
               <React.Fragment>
                 {__('There are no rewards available at this time, please check back later')}.
               </React.Fragment>
-        )}
+            ))}
         </p>
         <div className="card__actions">
           <Button
@@ -43,6 +55,7 @@ const RewardSummary = (props: Props) => {
         </p>
       </section>
     );
-};
+  }
+}
 
 export default RewardSummary;

src/renderer/page/rewards/view.jsx

@@ -10,7 +10,6 @@ import type { Reward } from 'types/reward';
 
 type Props = {
   doAuth: () => void,
-  fetchRewards: () => void,
   navigate: string => void,
   fetching: boolean,
   rewards: Array<Reward>,
@@ -27,10 +26,6 @@ type Props = {
 };
 
 class RewardsPage extends React.PureComponent<Props> {
-  componentDidMount() {
-    this.props.fetchRewards();
-  }
-
   renderPageHeader() {
     const { doAuth, navigate, user, daemonSettings } = this.props;
 

src/renderer/redux/actions/rewards.js

@@ -55,6 +55,7 @@ export function doClaimRewardType(rewardType, options) {
     });
 
     const success = successReward => {
+      dispatch(doRewardList());
       dispatch({
         type: ACTIONS.CLAIM_REWARD_SUCCESS,
         data: {