Make loading indicator while data is fetching

[justice47]

Can we show user some message while data is being fetched (while :rows prop is empty i.e.)? Or what slot should we use to print something inside table?

[MicroDroid]

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

[justice47]

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.

[justice47]

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

[MicroDroid]

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?

[justice47]

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.

[MicroDroid]

wooo

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

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. :roll_eyes:

[justice47]

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?

[MicroDroid]

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.

[justice47]

@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?

[MicroDroid]

Why does it need to differentiate between the two states?

On Mon, Jul 15, 2019 at 3:13 PM justice47 notifications@github.com wrote:

@MicroDroid https://github.com/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?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MicroDroid/vue-materialize-datatable/issues/41?email_source=notifications&email_token=ACBA27YB7EG5A7HYERMGADLP7RSVFA5CNFSM4H6ZJK2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ5P6UI#issuecomment-511377233, or mute the thread https://github.com/notifications/unsubscribe-auth/ACBA276J7VEYNJXVYUI3OATP7RSVFANCNFSM4H6ZJK2A .

[MicroDroid]

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

[justice47]

@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

[MicroDroid]

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.