Skip to content
Permalink
Browse files

chore: add loading spinner

  • Loading branch information...
mkczarkowski committed May 19, 2018
1 parent 29232be commit 69176b4824e1b46c7b83e032e2e2f991dd18de8f
Showing with 15 additions and 6 deletions.
  1. +1 −0 package.json
  2. +9 −4 src/components/CoinList/CoinList.js
  3. +5 −2 src/containers/App.js
@@ -16,6 +16,7 @@
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"react-spinkit": "^3.0.0",
"styled-components": "^3.2.6"
},
"scripts": {
@@ -1,17 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from "styled-components";
import styled from 'styled-components';
import Spinner from 'react-spinkit';

import Coin from './Coin/Coin';
import CoinListHead from './CoinListHead/CoinListHead';

const NoResults = styled.p`
margin-top: 3%;
text-align: center;
font-size: 1.2em;
`;

const CoinList = ({ cryptos }) => {
const CenteredSpinner = styled(Spinner)`
margin: 3%;
text-align: center;
`;

const CoinList = ({ cryptos, isLoading }) => {
const isListEmpty = cryptos.length === 0;
const renderCoin = crypto => <Coin {...crypto} key={crypto.acronym} />;
const coinList = isListEmpty ? (
@@ -23,7 +28,7 @@ const CoinList = ({ cryptos }) => {
return (
<div>
<CoinListHead />
{coinList}
{isLoading ? <CenteredSpinner name="three-bounce" /> : coinList}
</div>
);
};
@@ -5,7 +5,7 @@ import axios from 'axios';
import Header from '../components/Header/Header';
import SearchBar from '../components/SearchBar/SearchBar';
import CoinList from '../components/CoinList/CoinList';
import { mapFetchedCryptos } from "../shared/utils/helpers";
import { mapFetchedCryptos } from '../shared/utils/helpers';

const coinMarketCapAxiosInstance = axios.create({
baseURL: 'https://api.coinmarketcap.com/v2/',
@@ -17,6 +17,7 @@ class App extends Component {
matchedCryptos: null,
marketCap: 376097583984,
searchQuery: '',
isLoading: true,
};

setMatchedCryptos = debounce(() => {
@@ -43,7 +44,8 @@ class App extends Component {
.get('ticker/?limit=100')
.then(({ data: { data: fetchedCryptos } }) => {
this.setState({
cryptos: mapFetchedCryptos(fetchedCryptos)
cryptos: mapFetchedCryptos(fetchedCryptos),
isLoading: false,
});
});
}
@@ -62,6 +64,7 @@ class App extends Component {
? this.state.matchedCryptos
: this.state.cryptos
}
isLoading={this.state.isLoading}
/>
</div>
);

0 comments on commit 69176b4

Please sign in to comment.
You can’t perform that action at this time.