b-table with spinner on filter

I feel like I’m missing something really simple here, so I apologize initially for the question.

I’ve got a very large table which I’m rendering using a b-table. I’ve been reading through the various issues around table performance and I’ve implemented pagination and a primary-key etc… but now I’d like to have a simple spinner for the filtering event (which takes 1-2 seconds).

  methods: {
    setFilter() {
      this.loading = true
      console.log('this.loading = ', this.loading)
      this.filter = this.filterInput
    },
    clearFilter() {
      this.filter = ''
      this.filterInput = ''
    },
    onFiltered(filteredItems) {
      this.totalRows = filteredItems.length
      this.currentPage = 1
      this.loading = false
      console.log('this.loading = ', this.loading)
    },
  },

I’ve got a v-if’d div that handles the spinner based on this.loading it works just fine for the initial load and parse of the data. But for some reason it never fires here. When I click filter (or press enter on the input) setFilter is called, but I never see the spinner, and then eventually the results are filtered. I know this is not a bug with b-table, but I’m confused as to why I see the value of this.loading changed in the console but no evidence in the DOM rendering. I tried sprinkling this.$nextTick around but that didn’t seem to help.

[Hiws]

Try using a double setTimeout. http://www.hesselinkwebdesign.nl/2019/nexttick-vs-settimeout-in-vue/ (You might find better explanations on the issue/difference between the two, but this was the first link on google)

setFilter() {
  this.loading = true;
  setTimeout(() => {
    setTimeout(() => {
      this.filter = this.filterInput;
    });
  });
}

[Hiws]

Sadly can’t give you an answer for that. Usually one is enough, as was your case. But I’ve found that sometimes two is required. It might have to do with the overlays innerworkings as, it might (not sure) use nextTick/setTimeout internally which could conflict with the flow.