Debounce column sorting

[Chris-Petty]

Currently if a user spams the sorting on a column, it'll stack up the function calls and slowly (for lots of rows), sequentially run each sort call.

Idea is to debounce the function given to onPress, so that repeated presses don't make repeated calls. This should be done in a way that respects RN component state. Need to think about how long to make the delay and whether or not it is a prop to the table component (I like the idea of making it proportional to the amount of rows).

An optimisation would be to have row data array simply reversed if only isAscending is changed.

As an aside, it would be good to indicate that the sorting is running. A small loading indicator or animation should communicate this to the user. Could replace the sort arrow with a spinner until complete, or dim/overlay the table with a loading spinner in the middle while it sorts.

msupply-foundation/mobile#412

[josh-griffin]

Adding a library might be a little heavy-handed, but underscore has a lot of helpful features anyway. Anyway, simple solution could be to make a TouchableDebounce component, wrapping a Touchable and it's onPress prop with https://underscorejs.org/#debounce

[Chris-Petty]

I hear Lodash is cooler than underscore 😛.

It's tempting just to take the underscore implementation and paste it in. It's just about a dozen lines as seen here. Saves having to deal with the dependancy? If I'm not mistaken, we can make sure the build we publish does the correct tree shaking and then the dependancy will be reduced to just debounce anyway. Copy paste sure sounds easier though!

Lodash for data array processing optimisations is probs something to consider, though. If this repo ends up with any of that.