Changing cursor to wait on table sort

I am using React Bootstrap Table and I am trying to add a loading cursor when the user clicks the sort button.

While I am using that specific table, the problem seems more universal in that the DOM is unavailable when the table is sorting so anything I do to the cursor only happens after the table is done sorting. If the table contains a lot of items this can take a few seconds.

Is there any way add a loading cursor before the sorting starts?

Here is what I have tried so far in terms of React-Bootstrap-Table:

stopSortLoading = () => {
    if (document.querySelector('.table-container').classList.contains('loading-pointer')) {
        document.querySelector('.table-container').classList.toggle("loading-pointer")
    }
}
startSortLoading = () => {
    if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
        document.querySelector('.table-container').classList.toggle("loading-pointer")
    }
}

render() {

    const options = {
        onSortChange: this.startSortLoading,
        afterTableComplete: this.stopSortLoading
    };

I have also tried adding an onClick to a parent div i.e.

<div className='table-container' onClick={() => {
            if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
                document.querySelector('.table-container').classList.toggle("loading-pointer")
            }
        }}>
...table code
</div>

Nothing I have tried has any effect until AFTER the table is sorted.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.