Loading label/icon during table computation

[midium]

Hi, At the moment when the component is rendering the table the content remains empty and it seems quite like nothing has been loaded. I think it would be nice if it would be possible someway to implement a loading label or a loading icon where the content is being shown or anyway somewhere in the component in order to give users a better feedback.

Cheers, Matteo

[nacr]

:+1: @ratiw

[ratiw]

You can do that yourself by listening to vuetable:loading and vuetable:loaded events.

vuetable:loading event occurs just before vuetable requests data from the server. And when there is a response back from the server (whether success for failure), the vuetable:loaded event will occur.

This is done automatically in Semantic UI using loader, but Bootstrap does not come with that functionality. So, you may try to implement that using CSS or available third party library by calling trigger function inside those events to toggle the loading animation.

[midium]

@ratiw thaks for the hint, that works like a charm !

[midium]

@ratiw Anyway was thinking, wouldn't it be possible to implement a default loader inside the component quite like you do for the pagination component of the table? I mean this is just a thought and could be useful for those who are using bootstrap and don't know how to generate them-self a loader.

[ratiw]

@midium Well, I really think that the loader is kind of personal preference on styling. That's why I make vuetable open to that via events. But it'll be nice if there are more people asking for it and you could help by sharing it to them. :)

[mozami]

I was wondering about this myself, and I agree with @midium that the loader should be part of the component. However as @ratiw has pointed out, it is definitely a personal preference on how you want to present it - so from that point of view, it should preferably be kept outside of the component.

Perhaps a simple loader setup example can be part of the documentation wiki and users could just copy/modify based on the example? I haven't set up one yet, but when I do, I can share it in the docs or bootstrap example if @ratiw is interested?

[ratiw]

@mozami Yes, definitely. I only see benefits from sharing. It helps everyone! :)

[mozami]

@ratiw OK - I will share it as part of the wiki docs and/or you can also include it in the bootstrap demo.

[midium]

I agree that at least an example on the wiki would be great

[nacr]

:+1:

[mozami]

Hi @ratiw, how do I submit to the wiki? I have forked your bootstrap demo and can add a loader to it then you can check it out.

[ratiw]

@mozami I believe you could clone the wiki, update it, and send pull request.

https://github.com/ratiw/vue-table.wiki.git

[mozami]

👍 Thanks! I'll do so this afternoon

[mozami]

@midium i've uploaded a simple of loader using the 'loading' css class that displays a loading message when the load commences. You can view it here: loader demo / index.html source code

@ratiw i have put together a small doc for the wiki on loader setup with some examples, but seems like the wiki is for the repo collaborators only. Let me know how else i should post it?

[ratiw]

@mozami Thanks a lot. I'll check it out later tonight.

For the wiki, I thought it was just another repo that people can share. Sorry for that. I've just add you as a collaborator, can you please try again?

[mozami]

@ratiw Done. Please check / edit anything as necessary: https://github.com/ratiw/vue-table/wiki/Loading-Animation

[ratiw]

@mozami Perfect! :)