feat: add loading state to swaptab (#39)

* feat: add loading state to swaptab

src/components/swaptab/index.js

@@ -8,6 +8,8 @@ import Text, { InfoText } from '../text';
 import { MdArrowForward } from 'react-icons/md';
 import { MIN, MAX } from '../../constants/fees';
 
+const boltz_logo = require('../../asset/icons/boltz_logo.png');
+
 const styles = theme => ({
   wrapper: {
     margin: '15px',
@@ -80,6 +82,21 @@ const styles = theme => ({
   text: {
     fontSize: '20px',
   },
+  loading: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '400px',
+    width: '600px',
+    backgroundColor: theme.colors.white,
+    '@media (min-width: 1500px)': {
+      width: '800px',
+      height: '600px',
+    },
+  },
+  loadingLogo: {
+    width: '200px',
+    height: '200px',
+  },
 });
 
 class SwapTab extends React.Component {
@@ -144,15 +161,25 @@ class SwapTab extends React.Component {
   };
 
   render() {
-    const { classes, rates, currencies } = this.props;
+    const { classes, rates, currencies, loading } = this.props;
     let { error, base, quote, baseAmount, quoteAmount } = this.state;
 
     if (quoteAmount === 0) {
       this.quoteAmount = this.calculateQuoteAmount(baseAmount);
       quoteAmount = this.quoteAmount;
     }
 
-    return (
+    return loading ? (
+      <View className={classes.loading}>
+        <img
+          src={boltz_logo}
+          height={100}
+          width={100}
+          className={classes.loadingLogo}
+          alt="logo"
+        />
+      </View>
+    ) : (
       <View className={classes.wrapper}>
         <View className={classes.stats}>
           <InfoText title="Min amount:" text={`${MIN}`} />
@@ -211,6 +238,7 @@ SwapTab.propTypes = {
   onPress: PropTypes.func,
   rates: PropTypes.object.isRequired,
   currencies: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired,
 };
 
 export default injectSheet(styles)(SwapTab);

src/views/landingpage/landingpage.js

@@ -72,6 +72,7 @@ class LandingPage extends React.Component {
             <LinkButton text="WHY?" onPress={() => window.alert('WIP')} />
           </View>
           <SwapTab
+            loading={Object.keys(rates).length === 0 || currencies.length === 0}
             onPress={state => {
               const keys = generateKeys(
                 state.base === 'BTC' ? bitcoinNetwork : litecoinNetwork