I have a dAPP and I use reactjs for the frontend. The application returns data from a smart contract (the balance) on the homepage. The main problem that I notice is that everytime I or any other users access it, it takes like 2-3 seconds for data to be read from the blockchain. Until data is displayed, the balance is shown as '0' rather than the real value.
Furthermore, if a user with MetaMask changes their network (let's say from Eth MAINNET to Rinkeby), no data is displayed but 0.
Do you have this problem as well and if yes, how do you handle it? Is there a way to improve the time it takes to read data from Blockchain or is it a limitation of technology?
Some must know information about the general structure of the dAPP:
- I have the web3.js file which imports web3 and sets up provider either through MetaMask or through Infura.
- I have a deploy.js which enables me to deploy the smart contract. This file connects to rinkeby with menemonic and link provided by infura. In output I get the interface and bytecode
import web3 from './web3';
const address = 'the address provided by the deploy file';
const abi = ['the abi provided by the deploy file'];
export default new web3.eth.Contract(abi,address)
EDIT: Found out that the more operations I have in ComponentDidMount (fetching balance, addresses, etc.), the more time it takes