add fetchData to prevent blocking calls

app/components/Voting.js

@@ -8,6 +8,7 @@ import StatusLogo from '../ui/components/StatusLogo';
 import Collapse from '@material-ui/core/Collapse';
 import Hidden from '@material-ui/core/Hidden';
 import Typography from '@material-ui/core/Typography';
+import LinearProgress from '@material-ui/core/LinearProgress';
 import { VotingContext } from '../context';
 
 class Voting extends PureComponent {
@@ -18,10 +19,11 @@ class Voting extends PureComponent {
     const togglePoll = () => { this.setState({ addPoll: !addPoll })};
     return (
       <VotingContext.Consumer>
-        {({ getPolls, rawPolls }) =>
+        {({ getPolls, rawPolls, loading }) =>
           <div>
             <CssBaseline />
             <AppBar togglePoll={togglePoll} />
+            {loading && <LinearProgress />}
             <div style={{ margin: '30px', textAlign: 'center' }}>
               <img src="images/logo.png" width="200" />
               <Hidden smUp>

app/dapp.js

@@ -21,7 +21,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
   }
-  state = { admin: false, pollOrder: 'NEWEST_ADDED', web3Provider: true };
+  state = { admin: false, pollOrder: 'NEWEST_ADDED', web3Provider: true, loading: true };
 
   componentDidMount(){
     EmbarkJS.onReady((err) => {
@@ -42,10 +42,11 @@ class App extends React.Component {
   }
 
   _getPolls = async () => {
+    this.setState({ loading: true })
     const { nPolls, poll } = PollManager.methods;
     const polls = await nPolls().call();
-    if (polls) getPolls(polls, poll).then(omitPolls).then(rawPolls => { this.setState({ rawPolls })});
-    else this.setState({ rawPolls: [] });
+    if (polls) getPolls(polls, poll).then(omitPolls).then(rawPolls => { this.setState({ rawPolls, loading: false })});
+    else this.setState({ rawPolls: [], loading: false });
   }
 
   _setAccounts() {
@@ -86,7 +87,7 @@ class App extends React.Component {
   }
 
   render(){
-    const { admin, web3Provider } = this.state;
+    const { admin, web3Provider, loading } = this.state;
     const { _getPolls, updatePoll, setPollOrder, appendToPoll } = this;
     const toggleAdmin = () => this.setState({ admin: true });
     const votingContext = { getPolls: _getPolls, toggleAdmin, updatePoll, appendToPoll, setPollOrder, ...this.state };

app/utils/polls.js

@@ -18,22 +18,23 @@ export const getBalance = async (idPoll, token, startBlock) => {
 
 export const getVote = async(idPoll) => {
   const { fromWei } = web3.utils;
-
-  const votes = await PollManager.methods.getVote(idPoll, web3.eth.defaultAccount)
-                                         .call();
-                                    
+  const votes = await PollManager.methods.getVote(idPoll, web3.eth.defaultAccount).call();
   return parseInt(Math.sqrt(fromWei(votes)));
 }
 
-export const getPolls = async (number, pollMethod) => {
+const fetchPollData = async (index, pollMethod) => {
+  const poll = await pollMethod(index).call();
+  const balance = await getBalance(index, poll._token, poll._startBlock);
+  const votes = await getVote(index);
+  return { ...poll, idPoll: index, balance, votes };
+}
+
+export const getPolls = (number, pollMethod) => {
   const polls = [];
   for (let i = number-1; i >= 0; i--) {
-    const poll = await pollMethod(i).call();
-    const balance = await getBalance(i, poll._token, poll._startBlock);
-    const votes = await getVote(i);
-    polls.push({ ...poll, idPoll: i, balance, votes });
+    polls.push(fetchPollData(i, pollMethod));
   }
-  return polls.reverse();
+  return Promise.all(polls.reverse());
 }
 
 const excludedPolls = new Set(Object.values(excluded));