Slow response & no spinner during filtering

[nmwael]

Describe the bug

I cannot get the spinner to be shown during filtering even if filter-debounce are set.. The browser also seems to stall.

Steps to reproduce the bug

check the code pen

Expected behavior

I would expect the spinner to be shown during slow filtering..

Versions

• BootstrapVue: 2.0.0
• Bootstrap: 4.#.#
• Vue: 2.#.#

Demo link

https://codepen.io/nmwael/pen/YzKeboM?&editable=true&editors=101

[tmorehouse]

We may need to add a requestAnimationFrame() delay before calling the provider, to allow Vue time to update the DOM.

Filtering will be slow when you have a large number of items in your items array (>500).

[nmwael]

Yes Id expect it to be slow.. A way to show it to the user would very much be appreciated..

Notice I am using local filtering..

[tmorehouse]

Yeah... let me see if delaying the provider call via an animation frame allows Vue/b-table time to update the dom (showing the busy state).

[tmorehouse]

@nmwael here is a way to get a spinner a-spinnin' while b-table is filtering (or the user is typing in the filter criteria)

https://jsfiddle.net/r2mewagn/

[nmwael]

@nmwael here is a way to get a spinner a-spinnin' while b-table is filtering (or the user is typing in the filter criteria)

https://jsfiddle.net/r2mewagn/

Hmm I see what you are trying but it does not actually seem to work, the spinner shows when after "detection" of input entering has stopped. But it never filters and the spinner never goes away. Im still getting "lag" when I type.. Id expect the cursor to show during keyboard typing.. But it just seems to stop blinking when I begin to type and only come back after the whole sequence have been typed at the same time the key sequence appears.

[tmorehouse]

Make sure you are using the correct jsFiddle... I had posted a link to the wrong one originally. Try https://jsfiddle.net/r2mewagn/

[tmorehouse]

And here is an updated fiddle which has the table showing only the first 50 items (per-page=50, current-page=1), but still has 1000 rows to filter.

https://jsfiddle.net/51tf7mgd/

Also enabled fixed prop on b-table to enable fixed layout table (which makes the browser not have to compute the column widths by having to check all rendered rows and cells). this also drastically speeds up the browsers rendering/processing of the table markup.

[nmwael]

While performance are way better (this has not been my worry), the initial entering are still lagged.. I enter "item".. Screen does not show "i.t.e.m" but rather a small "lag" when I enter and then the whole word "item" are entered.. Im wondering @tmorehouse if you are experiencing this or I am expecting something completely unwarrented?

[tmorehouse]

This could be partially due to the initial rendering/dom-patching of the table, and Vue just isn't quite fully interactive yet.

Originally I was seeing lag issues at the beginning, but rearranging the code a bit, adding in a primary-key field name, reducing the amount of displayed rows, etc. makes the interface more responsive (for me at least):

Try this one out: https://jsfiddle.net/5hfzc6mv/

[tmorehouse]

@nmwael And here is your original CodePen with a few tweaks.

https://codepen.io/tmorehouse/pen/JjPZYmm?&editable=true&editors=101

Note you do not need to set the busy state in the provider (as it will be set automatically when it is called).

[nmwael]

Ok with 100 records show, its very responsive. If I change it to 1000 and for example write in "disco", the lag are there.. If I begin to delete disco, it remains responsive until I reach "di", probably because it starts drawing... are there a way to make the user aware that they must wait or expect the lag? a loading overlay or something?

[tmorehouse]

We might be able to fire an event saying that filtering/processing has started, and when it ends... but that might add an extra layer of complexity

[tmorehouse]

BootstrapVue v2.0.3 has been released with some performance enhancements that may help with your issue

[ckahn1]

@tmorehouse I am having a similar issue as mentioned above. When filter-debounce is used everything works as expected. However, since filter-debounce is deprecated and I use "debounce" in the b-form-input, the spinner no longer is displayed when filtering..

[dosstx]

I am having same issue as @ckahn1. Is there a solution for since filter-debounce is deprecated and I use "debounce" in the b-form-input, the spinner no longer is displayed when filtering.. ?

[dosstx]

Looks like need to add following events to bforminput:

        @keydown="isBusy= true"
        @update="isBusy = false"