Improve the performance of my-cards page

[hantuzun]

When I've 11 cards, https://regen.bingo/my-cards takes a couple of seconds to load. It should load immidiately.

[oytuncoban]

When I've 11 cards, https://regen.bingo/my-cards takes a couple of seconds to load. It should load immidiately.

So, was it a rendering issue or took a while to fetch from the contract?

[hantuzun]

It must be about how we fetch the contract; rendering cannot take this long. I'm profiling it now.

[hantuzun]

There are infinite number of fetches for the tokenURI; there is a bug on that.

[oytuncoban]

If we use limit&offset while getting multiple tokens from the contract we are going to need a count function too. And this makes us have to sort the tokens in decreasing order by match count "on the contract". I don't think this is suitable for gas price.

There are infinite number of fetches for the tokenURI; there is a bug on that.

I know the fix, done in my local. Will be pushed with pagination feature.

[hantuzun]

Please make different fixes in different commits and branches.

[hantuzun]

The first tokenURI calls are finalized in t1.8s but the first render begins at t8.2s.

[oytuncoban]

The first tokenURI calls are finalized in t1.8s but the first render begins at t8.2s.

This leads us to decoding the response and creating Card object is taking long. I'm going to optimize it then?

[oytuncoban]

Please make different fixes in different commits and branches.

Done in #47

[hantuzun]

Thanks!

[hantuzun]

This issue is not fixed yet. I tried /my-cards again on the deployment of https://github.com/neu-fi/regen-bingo/commit/ac8f4f5aea47fd6f09ded2a5d3b96a2b7ebb97ab. It took 9 seconds. Below is the performance display of Brave:

There are 4 visible requests to the smart contract; and the render happens only after the last one.

[oytuncoban]

This issue is not fixed yet. I tried /my-cards again on the deployment of ac8f4f5. It took 9 seconds. Below is the performance display of Brave:

There are 4 visible requests to the smart contract; and the render happens only after the last one.

Is that mean fetching cards within a for loop from the contract takes too long when deployed to Göerli? I couldn't reproduce on deployed product since I have no minted cards and minting period has ended, unfortunately.

[hantuzun]

Perhaps, needs to be investigated. One way to do would be logging timestamps on relevant requests and seeing them in action with local and Goerli deployments.

[oytuncoban]

Perhaps, needs to be investigated. One way to do would be logging timestamps on relevant requests and seeing them in action with local and Goerli deployments.

Previous approach was;

• Fetch the tokenId
• Await tokenURI
• Await decoding and constructing the Card
• Add to a list
• After all the tokens have fetched and Cards are created, set the card's state.

This makes the contract calls last even longer. So, I've decided to update the card's state as a new card have constructed and render it immediately.

I've created another branch and tested a new approach on Göerli. I think it does fine, but this approach is to render the cards immediately after we fetch them so, cards will be loaded one by one. If you agree with me on this approach, we can display a loading spinner until all the cards are fetched at the end of the list @hantuzun.