Treelist: Both the loading and collapse icons appear at the same time

[Jacquiline]

When I expand a parent, the loading and collapse icons appear simultaneously and the UI looks awkward. The collapse icon spins when the  loading of children happens. How can I prevent this? I would like the k-i-collapse icon to appear only after the loading finishes.

[George Gindev]

Hello Jacquiline,

 

Thank you for writing to us.

I have tried something similar - as seen in this dojo (https://dojo.telerik.com/IyulIGIK), it all appears smooth and works correctly as intended on my side, using the latest released version of Kendo UI.

The spinning loading animation is created by the .k-i-loading  CSS class added to the .k-icon element which also creates the style for expanded/collapsed state of the arrow indicator icon, by toggling the classes for  .k-i-collapse and  .k-i-expand.

The loading animation doesn't affect the style of the collapse/expand icons, and the collapsed arrow symbol is only added when the animated .k-i-loading class is removed from the .k-icon element.

Please send us a working code or dojo sample, where the issue can be reproduced, so we can understand and further discuss any issues that arise. This will allow us to provide more precise and accurate suggestions.

Regards,
George Gindev
Progress Telerik

[Jacquiline]

Hi George,

Thanks a lot for the response. I am in the process of creating a working sample. Will update you soon.

[Jacquiline]

I could not reproduce the issue on Dojo but the issue exist in the project that I am working on. When I debugged, I found   this._contentTree in the render function of kendo.all.js containing the k-i-loading and k-i-collapse classes. I am using the v2020.1.219 of kendo. Somehow, before loading the children the collapse icon is displayed but as soon as the loading finishes the loading icon disappears . 

[George Gindev]

Hi Jacquiline,

Given the provided description, it is tough for me to imagine what the problem is exactly or how to go about solving it.

I suspect the problem might be custom CSS added to the project which overrides the default values of the icon element or its ":before/:after" pseudo-elements.

Could you please check if removing all the custom CSS from the project resolves the issue?

 

Regards,
George Gindev
Progress Telerik