1

I am developing a DApp and I am struggling with the efficient loading from the blockchain and displaying in the frontend. I am loading all the items at once. When the list of the items grows very large (> 500), frontend starts lagging and the loading is kinda slow (I get warnings like "[Violation] Forced reflow while executing JavaScript took 87ms"). The page has a pagination and sorters/filters, thus I cannot load items partially (by index), as I don't know how many of them I will need when filters/sorters are applied.

Here is the pseudo code: Solidity:

struct Item {
  uint256 id;
  address owner;
  bool claimed;
}

Item[] private items;
uint256 public numberOfItems;

function getItemInfo(uint256 itemID) public view returns(address owner, bool claimed) {
  Item memory item = items[itemID];

  owner = item.owner;
  claimed = item.claimed;
}

JS (web3):

loadItems: function(items, account) {
  var contractInstance;

  App.contracts.MyContract.deployed().then(function(instance) {
    contractInstance = instance;
    return contractInstance.numberOfItems.call();
}).then(function(numberOfItems) {
  console.log(Number(numberOfItems));

  for (var i = 0; i < numberOfItems; i++ ){
  contractInstance.getItemInfo(i).then(function(data){
    //console.log(data);
  })
}
}).catch(function(err) {
  console.log(err.message);
});
},

It would be great to receive any suggestions on how can I solve this problem and load items efficiently.

0

To make sure things load, you need to use promises. This will make sure nothing gets borked because things timed out. There are a few strategies, here is one example:

function TotalOwnersPromise(Contract) {
return new Promise((resolve, reject) => {

     Contract.TotalOwners(function (error, result) {
        if (error) {
            reject(error);
            console.log("Total Owners Error");
        } else {

            resolve(result);
            console.log("Owners " + Owners);
        }
         });
     });
};

As for the huge amount of requests you are making, you are going to need to run your own node and have some node.js watching events and contracts. There is no guarantee infura or etherscan will in the future allow so many requests to hammer them for free.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.