tx history / balance refresh spinner

react/src/components/dashboard/importKeyModal/importKeyModal.js

@@ -197,7 +197,6 @@ class ImportKeyModal extends React.Component {
     });
 
     // reset input vals
-    this.refs.wif
     this.refs.wifkeysPassphrase.value = '';
     this.refs.wifkeysPassphraseTextarea.value = '';
   }

react/src/components/dashboard/spinner/spinner.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+class Spinner extends React.Component {
+  constructor() {
+    super();
+  }
+
+  render() {
+    let _paths = [];
+
+    for (let i = 0; i < 4; i++) {
+      _paths.push(
+        <circle
+          className={ i === 0 ? 'path' : `path${i + 1}` }
+          cx="50"
+          cy="50"
+          r="20"
+          fill="none"
+          strokeWidth="5"
+          strokeMiterlimit="10"
+          key={ `spinner-circle-${i}` } />
+      );
+    }
+
+    return (
+      <div className="loader">
+        <svg className="circle">
+        { _paths }
+        </svg>
+      </div>
+    );
+  }
+}
+
+export default Spinner;

react/src/components/dashboard/spinner/spinner.scss

@@ -0,0 +1,121 @@
+.loader {
+  float: right;
+  width: 18px;
+  height: 18px;
+  position: relative;
+
+  .circle {
+    animation: rotate 2s linear infinite;
+    height: 100px;
+    position: relative;
+    width: 100px;
+  }
+
+  .path {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite;
+    stroke: #FFB8A2;
+    stroke-linecap: round;
+  }
+
+  .path2 {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+    animation: dash2 1.5s ease-in-out infinite;
+    stroke: #FF9372;
+    stroke-linecap: round;
+  }
+
+  .path3 {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+    animation: dash3 1.5s ease-in-out infinite;
+    stroke: #FF7C53;
+    stroke-linecap: round;
+  }
+
+  .path4 {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+    animation: dash4 1.5s ease-in-out infinite;
+    stroke: #FE450D;
+    stroke-linecap: round;
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
+}
+@keyframes dash2 {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -50;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
+}
+@keyframes dash3 {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -75;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
+}
+@keyframes dash4 {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -100;
+  }
+  100% {
+    stroke-dasharray: 89,200;
+    stroke-dashoffset: -124;
+  }
+}
+@keyframes color {
+  100%, 0% {
+    stroke: #FF8D6A;
+  }
+  40% {
+    stroke: #FE450D;
+  }
+  66% {
+    stroke: #FF683A;
+  }
+  80%, 90% {
+    stroke: #FF7D56;
+  }
+}

react/src/components/dashboard/walletsBalance/walletsBalance.js

@@ -15,6 +15,7 @@ class WalletsBalance extends React.Component {
     super();
     this.state = {
       currentAddress: null,
+      loading: false,
     };
     this.isFullySynced = this.isFullySynced.bind(this);
     this.refreshBalance = this.refreshBalance.bind(this);
@@ -43,6 +44,15 @@ class WalletsBalance extends React.Component {
   }
 
   refreshBalance() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+
     if (this.props.ActiveCoin.mode === 'native') {
       Store.dispatch(getDashboardUpdate(this.props.ActiveCoin.coin));
     } else if (this.props.ActiveCoin.mode === 'spv') {

react/src/components/dashboard/walletsBalance/walletsBalance.render.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { translate } from '../../../translate/translate';
 import { formatValue } from '../../../util/formatValue';
 import Config from '../../../config';
+import Spinner from '../spinner/spinner';
 
 const WalletsBalanceRender = function() {
   return (
@@ -13,9 +14,16 @@ const WalletsBalanceRender = function() {
           <div className={ this.props.ActiveCoin.coin === 'CHIPS' || (this.props.ActiveCoin.mode === 'spv' && this.props.ActiveCoin.coin !== 'KMD') || this.renderBalance('total') === this.renderBalance('transparent') || this.renderBalance('total') === 0 ? 'col-lg-12 col-xs-12 balance-placeholder--bold' : 'col-lg-3 col-xs-12' }>
             <div className="widget widget-shadow">
               <div className="widget-content">
-                <i
+                { this.state.loading &&
-                  className="icon fa-refresh manual-balance-refresh pointer"
+                  <span className="spinner--small">
-                  onClick={ this.refreshBalance }></i>
+                    <Spinner />
+                  </span>
+                }
+                { !this.state.loading &&
+                  <i
+                    className="icon fa-refresh manual-balance-refresh pointer"
+                    onClick={ this.refreshBalance }></i>
+                }
                 <div className="padding-20 padding-top-10">
                   <div className="clearfix">
                     <div className="pull-left padding-vertical-10">
@@ -23,6 +31,10 @@ const WalletsBalanceRender = function() {
                         this.props.ActiveCoin.mode !== 'spv' &&
                         <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>
                       }
+                      { this.props.ActiveCoin.mode === 'spv' &&
+                        Number(this.renderBalance('interest')) > 0 &&
+                        <span className="padding-right-30">&nbsp;</span>
+                      }
                       { this.props.ActiveCoin.coin === 'CHIPS' || this.props.ActiveCoin.mode === 'spv' ? translate('INDEX.BALANCE') : translate('INDEX.TRANSPARENT_BALANCE') }
                     </div>
                     <span

react/src/components/dashboard/walletsData/walletsData.js

@@ -51,6 +51,7 @@ class WalletsData extends React.Component {
       searchTerm: null,
       coin: null,
       txhistory: null,
+      loading: false,
     };
     this.openDropMenu = this.openDropMenu.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
@@ -252,6 +253,15 @@ class WalletsData extends React.Component {
   }
 
   refreshTxHistory() {
+    this.setState({
+      loading: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        loading: false,
+      });
+    }, 1000);
+
     if (this.props.ActiveCoin.mode === 'native') {
       Store.dispatch(getDashboardUpdate(this.props.ActiveCoin.coin));
     } else if (this.props.ActiveCoin.mode === 'spv') {

react/src/components/dashboard/walletsData/walletsData.render.js

@@ -4,6 +4,7 @@ import ReactTable from 'react-table';
 import TablePaginationRenderer from './pagination';
 import { formatValue } from '../../../util/formatValue';
 import Config from '../../../config';
+import Spinner from '../spinner/spinner';
 
 export const TxConfsRender = function(confs) {
   if (Number(confs) > -1) {
@@ -248,9 +249,16 @@ export const WalletsDataRender = function() {
               <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
                 <div className="panel">
                   <header className="panel-heading z-index-10">
-                    <i
+                    { this.state.loading &&
-                      className="icon fa-refresh manual-txhistory-refresh pointer"
+                      <span className="spinner--small">
-                      onClick={ this.refreshTxHistory }></i>
+                        <Spinner />
+                      </span>
+                    }
+                    { !this.state.loading &&
+                      <i
+                        className="icon fa-refresh manual-txhistory-refresh pointer"
+                        onClick={ this.refreshTxHistory }></i>
+                    }
                     <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
                   </header>
                   <div className="panel-body">

react/src/components/overrides.scss

@@ -616,4 +616,11 @@ select{
 
 .col-red {
   color: #f96868;
+}
+
+.spinner--small {
+  position: absolute;
+  right: 18px;
+  top: -15px;
+  transform: scale(0.4);
 }

react/src/styles/index.scss

@@ -43,5 +43,6 @@
 @import '../components/dashboard/coindDownModal/coindDownModal.scss';
 @import '../components/dashboard/loginSettingsModal/loginSettingsModal.scss';
 @import '../components/dashboard/zcparamsFetchModal/zcparamsFetchModal.scss';
+@import '../components/dashboard/spinner/spinner.scss';
 @import '../components/toaster/toaster.scss';
 @import '~react-table/react-table.css';