Status Indicator Bug

src/botPage/bot/TradeEngine/index.js

@@ -16,6 +16,7 @@ import Ticks from './Ticks';
 import rootReducer from './state/reducers';
 import * as constants from './state/constants';
 import { start } from './state/actions';
+import { observer as globalObserver } from '../../../common/utils/observer';
 
 const watchBefore = store =>
     watchScope({
@@ -34,7 +35,7 @@ const watchDuring = store =>
     });
 
 /* The watchScope function is called randomly and resets the prevTick
- * which leads to the same problem we try to solve. So prevTick is isolated 
+ * which leads to the same problem we try to solve. So prevTick is isolated
  */
 let prevTick;
 const watchScope = ({ store, stopScope, passScope, passFlag }) => {
@@ -90,6 +91,8 @@ export default class TradeEngine extends Balance(Purchase(Sell(OpenContract(Prop
             throw createError('NotInitialized', translate('Bot.init is not called'));
         }
 
+        globalObserver.emit('bot.running');
+
         this.tradeOptions = expectTradeOptions(tradeOptions);
 
         this.store.dispatch(start());

src/botPage/view/TradeInfoPanel/index.js

@@ -30,6 +30,7 @@ class AnimateTrade extends Component {
         super();
         this.indicatorMessages = {
             notRunning: translate('Bot is not running.'),
+            starting  : translate('Bot is starting...'),
             running   : translate('Bot is running...'),
             stopping  : translate('Bot is stopping...'),
             stopped   : translate('Bot has stopped.'),
@@ -40,18 +41,27 @@ class AnimateTrade extends Component {
         };
     }
     componentWillMount() {
+        globalObserver.register('bot.running', () => {
+            $('.stage-tooltip.top:eq(0)').addClass('running');
+            this.setState({ indicatorMessage: this.indicatorMessages.running });
+        });
         globalObserver.register('bot.stop', () => {
             $('.stage-tooltip.top:eq(0)').removeClass('running');
             this.setState({ indicatorMessage: this.indicatorMessages.stopped });
         });
+
         $('#stopButton').click(() => {
             $('.stage-tooltip.top:eq(0)').removeClass('running');
             this.setState({ indicatorMessage: this.state.stopMessage });
         });
+
         $('#runButton').click(() => {
             resetAnimation();
             $('.stage-tooltip.top:eq(0)').addClass('running');
-            this.setState({ indicatorMessage: this.indicatorMessages.running });
+            this.setState({
+                indicatorMessage: this.indicatorMessages.starting,
+                stopMessage     : this.indicatorMessages.stopped,
+            });
             globalObserver.register('contract.status', contractStatus => {
                 this.animateStage(contractStatus);
             });