Add waiting flag to notification for spinner

src/action/info.js

@@ -15,7 +15,7 @@ class InfoAction {
       this._store.syncedToChain = response.synced_to_chain;
       this._store.blockHeight = response.block_height;
       if (!response.synced_to_chain) {
-        this._notification.display({ msg: 'Syncing to chain ...' });
+        this._notification.display({ msg: 'Syncing to chain', wait: true });
         log.info(`Syncing to chain ... block height: ${response.block_height}`);
         clearTimeout(this.t3);
         this.t3 = setTimeout(() => this.getInfo(), RETRY_DELAY);

src/action/notification.js

@@ -7,11 +7,12 @@ class NotificationAction {
     this._nav = nav;
   }
 
-  display({ type, msg, err, handler, handlerLbl }) {
+  display({ type, msg, wait, err, handler, handlerLbl }) {
     if (err) log.error(msg, err);
     this._store.notifications.push({
       type: type || (err ? 'error' : 'info'),
       message: msg,
+      waiting: wait,
       date: new Date(),
       handler: handler || (err ? () => this._nav.goCLI() : null),
       handlerLbl: handlerLbl || (err ? 'Show error logs' : null),

src/component/notification.js

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import { SmallPillButton } from './button';
 import { Text, H4Text } from './text';
 import Icon from './icon';
-import { color, font } from '../component/style';
+import { SmallSpinner } from './spinner';
+import { color, font } from './style';
 
 //
 // NotificationBar
@@ -47,6 +48,7 @@ export const NotificationBar = ({ notification, display, style }) =>
           onPress={notification.handler}
         />
       ) : null}
+      {notification.waiting ? <SmallSpinner /> : null}
     </View>
   ) : null;
 

stories/component/notification.js

@@ -6,12 +6,19 @@ import NotificationAction from '../../src/action/notification';
 import { Store } from '../../src/store';
 
 const store = new Store();
+store.init();
 export const notify = new NotificationAction(store);
 
 storiesOf('Notification', module)
-  .add('Notification Bar', () => (
+  .add('Notification Bar (error)', () => (
     <NotificationBar
-      notification={store.lastNotification}
+      notification={store.notifications[0]}
+      display={store.displayNotification}
+    />
+  ))
+  .add('Notification Bar (waiting)', () => (
+    <NotificationBar
+      notification={store.notifications[1]}
       display={store.displayNotification}
     />
   ))
@@ -29,3 +36,9 @@ store.notifications.push({
   handlerLbl: 'Handle error',
   display: true,
 });
+store.notifications.push({
+  type: 'info',
+  message: 'Syncing to chain',
+  waiting: true,
+  display: true,
+});