search

JoinColony / colonyCDapp

An iteration of the Colony Dapp sporting both a fully decentralized operating mode, as well as a mode enhanced by a metadata caching layer
5 stars 14 forks source link

Advanced Payments Table is incredibly slow when there is a large number of rows #3673

Open iamsamgibbs opened 1 week ago

iamsamgibbs commented 1 week ago

Steps to reproduce

Expected behaviour

Actual behaviour

https://github.com/user-attachments/assets/59e005b7-9019-48ca-8840-90dd4a406379

Screenshot 2024-11-07 at 14 42 39 Screenshot 2024-11-07 at 14 47 55 Screenshot 2024-11-07 at 14 48 05

Payments also seem to be coming in in the incorrect order on the completed action screen too (should be starting from 1 not 37), I'm hoping it is somehow related to this laggy behaviour and will work properly once it is resolved rather than being a deeper issue:

Screenshot 2024-11-07 at 14 55 57
rumzledz commented 6 days ago

Hey @iamsamgibbs I got intrigued by this issue because you're right, this used to be pretty efficient at handling any number of rows. I remember testing a PR of yours that deal with uploading a CSV file with a huge number of rows and it was in https://github.com/JoinColony/colonyCDapp/pull/3076.

I am not confident I'd be able to fix it today and I pretty much won't have time next week because of Thailand but I'll leave a comment about why I think this is happening, based on my quick and initial investigation so far.

I had a feeling that this might due to the advanced payment form's payments array validations so I started from there. I uploaded your 400-row CSV file and took out the payments field from the validations schema and low and behold, the slowness got eradicated!

I took out the block from line 49:

image

I brought it back then through process of elimination, this seems to be the main culprit: allTokensAmountValidation. If you commented it out, the form becomes pretty snappy after a CSV upload.

image

We might be able to optimise this function if we can take out some (if it's even possible) array-based logic for individual tokens and just do it outside i.e. do it in useValidationSchema instead, memoise it then pass it in as a prop to allTokensAmountValidation. That way, these heavy array operations inside the allTokensAmountValidation don't run payments.length number of times.

This is just a humble suggestion though and untested 😅