Make loading indicator while data is fetching about vue-materialize-datatable HOT 13 CLOSED

Just v-if the entire component and show a loader instead

from vue-materialize-datatable.

Just v-if the entire component and show a loader instead

This method solves problem just partially.
I have multiple tables on one page, each of them loading data from different sources.
So, I want to quickly show users all different tables (title, columns, etc.)
Thats why I want to render all static data at once, and then show loading indicator inside table while data is fetching.

I have a few thoughts. We can impliment one more slot like this.
In the component source:

<tbody>
 ...
 <slot name="body-center">
 </slot>
</tbody>

And in the app:

<td slot="body-center" colspan="20" align="center">
 *some loading indicator*
</td>

I can make a PR for that if you think it's OK this way.

from vue-materialize-datatable.

@MicroDroid I've implemented this in my project and it works like a charm with simple spinner

from vue-materialize-datatable.

I actually don't like the approach of having this slot, it's very prone to bugs. Aside from that, loading tables incrementally can cause page vertical scroll to go haywire, no?

from vue-materialize-datatable.

Thats right, but If we know initial amount of rows we can use skeleton loading for example with fixed height, so overall height of content will not change after data is loaded.

from vue-materialize-datatable.

wooo

I actually like that approach, I should do this everywhere in my websites, too. 🤔

Thanks for the heads up, and I'd also appreciate any PRs to this library to support such kind of a thing, but I'd rather try stay away from a slot like that cause it can turn things into haywire. Currently, the library is aware of the number of items per page, perhaps one could add a loading prop and it should do exactly that, just maybe. 🙄

from vue-materialize-datatable.

So, just to clarify, we can:

1. Add this skeleton loading component as a dependency/make different skeleton loading inside rows just for the vue-materialize-datatable
2. Add loading prop which, if setted to true, fires up skeleton loading while table data is empty for every <td> content

Right?

from vue-materialize-datatable.

Yeah exactly. I'm not sure how far flexible is this plugin is, but if we can get the skeleton to look highly similar to what the table displays, then we can use it and no need to reinvent the wheel. Otherwise we may opt for an in-house solution.

But in general yeah, that should be just about right.

from vue-materialize-datatable.

@MicroDroid problem appears - how we can differ in component no data at all (empty rows) or data just being fetched (rows empty, but will be fullfilled)?

Maybe we can use some keyword, i.e. rows='loading' while data is fetching will tell the component that it's awaiting data?

from vue-materialize-datatable.

from vue-materialize-datatable.

Sorry I was meaning that if loading is false and there are no rows then, well, there are no rows.

from vue-materialize-datatable.

@MicroDroid I'm agree with you.
Second problem is the situation, when fetched amount of rows is less than expected (less than defaultPerPage), it will cause haywire. Of course in most cases amount of rows is more than defaultPerPage, but will we be OK with this?
Or we can just let user to decide how many skeleton loading rows to show with :rowsLoading="5" i.e.
And when its not setted get amount of loading rows from defaultPerPage

from vue-materialize-datatable.

No need to make an option for that, the developer that uses this library wouldn't be able to determine that either.

It should be same as defaultPerPage and it's not the end of the world if it turns out to be less, it's what happens on any website on the internet that uses skeleton loading anyways.

from vue-materialize-datatable.