Loading Remote Data

Load remote data to the TreeList component by either showing a loading indicator over the whole component when expanding a row, or by replacing the expand icon with a loading icon until the data finishes loading using custom cells.

Loading indicator above the whole component

You can check when an item is expanded by checking if event.value if set to false in the onExpandChange event. In this case, set the loading state variable to true and set it to null when the data finishes its loading. Additionally, conditionally render the loading panel component when loading is true.

Example
View Source
Change Theme:

Loading the expanded item

In this demo, we are also checking if an item is being expanded using the same approach. However, we are replacing the expanded icon with a loading icon for the expanded item using a custom cell based on the value of loadingID.

Example
View Source
Change Theme: