Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug fix in 'isLoading' spinner in 'remote' mode #474

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

bug fix in 'isLoading' spinner in 'remote' mode #474

wants to merge 1 commit into from

Conversation

rubanraj54
Copy link
Contributor

I have a situation where I make ajax call and it fails in the 'remote' mode and the 'loading' bar still appears in the table. Lets consider the scenario, i make a ajax request as follows,

    axios.get(url)
    .then(function(response){
        this.rows = response.data.data;
    }).catch(error => {
        // possibility 1 (which is not working)
        this.isLoading = false;
       // possibility 2 (my current work around)
       this.row = cloneDeep(this.row);
    });

possibility 1 : changing the isLoading status to false which is potentially not working
Reason :
Table.vue L472

  isTableLoading() {
     return this.isLoading || this.tableLoading;
   },

Let say i sorted a column and it sets 'this.tableLoading' to true and I make a ajax call to get a new set of data, but unfortunately it fails and i manually change 'this.isLoading' to 'false' from parent component. Now, in 'VueGoodTable' component, this.isLoading is false and this.tableLoading is still true, so the computed value of 'isTableLoading' is still be true, which means it wont hide the loading indicator.

possibility 2 : Making a deep copy of my old data and setting it to this.row which triggers the 'row' watcher in VueGoodTable component potentially hiding the indicator. But this is not the right way to control loading indicator IMHO.

My solution:
In the parent component make a 'isLoading' prop with '.sync' modifier which listens for events from vue table to change the state of loading indicator.

...
<vue-good-table
  mode='remote'
  ref="my-table"
  :isLoading.sync="isLoading"
  @on-column-filter="onColumnFilter"
  @on-select-all="onSelectAll"
  @on-sort-change="onSortChange"
  @on-page-change="onPageChange"
  @on-per-page-change="onPerPageChange"
  @on-search="onSearch"
  @on-selected-rows-change="onSelectChanged"
  :columns="columns"
:rows="rows">
...
data() {
    return {
      isLoading:false,
   }
}
...

In the VueGoodTable component, just emit the event 'update:isLoading' with true or false to show or hide the loading indicator, which I modified already in the current source code. Please have a look at the changes and accept this pull request.

@PrimozRome
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants