Loading indicator class/icon for trees

It can take a few seconds to dynamically load a tree node with many kids. In that case, the +/- buttons don’t change, and the user has no feedback as to what’s happening.

It would be nice to change the class of the node that’s being loaded to something like webix_loading.

Kendo implements this with a .k-loading class.

Yep, it sounds as a good idea. Will try to add in next builds.

For now - it possible to use progressbar for loading visualization.

http://webix.com/snippet/408e5f87

Nice solution! A bit intrusive, as it covers the entire tree, but pretty nice.

I was trying to get the icon of the node to spin with

node.$css = 'webix_icon fa-spinner fa-spin';

But that applies to the entire node, and the node value becomes blank…

http://webix.com/snippet/bc6e432a

You can redefine the icon logic for the tree and change icon for the loading items

http://webix.com/snippet/ceb3ef4b

Nice, thank you.

I see that the loading icon is defined as return '<div class="webix_tree_open fa-spinner fa-spin"></div>';, but what happens when expanding a node is that its current icon starts to spin, so only fa-spin works, but fa-spinner isn’t applied. How can we replace the icon of the node with fa-spinner?

Check the updated snippet

http://webix.com/snippet/f4f96b40

Nice, so it requires webix_tree_custom.

There’s a little problem: once we expand one of the two nodes, each of the children shows a + button as if it had webix_kids.

Yep, was my mistake in icon function

Correct snippet
http://webix.com/snippet/217709d4

Perfect, thank you! This is complicated enough that a “loading” class would be great to have in the next Webix version.