Spinner Icon showing on node expanding with async operation

[Balaji]

Hi,  We are implementing blazor treeeview . Here root nodes are loaded on Page_Load (or) OnInitializedAsync and for child nodes we are loading on node expanding with async/await API call to get child data and binding to treeview. All working fine, but after the node expanding and binding child.. the parent node ICON is showing as Spinner loading continuously.. this is because of await operation. If I bind without await operation i.e static data then there is no issue.  Could you please help on this urgent.

Attachment: SpinnerLoading_4f2b2b11.zip

[Jafar Ali Shahulhameed]

Hi Balaji,

We have prepared the sample and regret to inform you that we cannot be able to replicate the issue from our end.

We kindly suggest you provide some additional details such as package version you are using, TreeView code snippets. If possible, share the issue replicate sample or try to replicate the issue in the shared sample. This will help us to provide you a prompt solution.

We have attached the sample for your reference,

Sample: Attached as zip file.

Kindly check out the shared details and get back to us if you need further assistance.

Regards,

Jafar

Attachment: Blazor_TreeView_7f19116e.zip

[Balaji]

Hi,

Thanks for your reply.. we are having the issue, I have updated the sample application provided by you with scenario to reproduce the issue.

Here in Home.razor file , in "NodeExpanding" method , 

i.e line number starting from 42.

Call any web api method with await operation and the with resulted nodes add to treeview nodes and then see the UI.

You have to to do some code updates in  Home.razor  from line number 42 to 49 with await API call  and then bind to reproduce the issue.

We are able to reproduce the issue.

Attachment: BlazorApp1_e122ea2e.zip

[Balaji]

Hi ,

I am uploading latest sample application with exact scenario.. just you need to update line number 65 in Home.razor file with valid web api call to get some data.

Now run the application and then expand "Parent1" node to show child nodes. Spinner is showing in place of expand/collapse icon.

very easy to reproduce.  Attached solution and error image also.

Attachment: BlazorApp1_a59e7fed.zip

[Jafar Ali Shahulhameed]

Hi Balaji,

On validating the shared sample we found that the issue you are facing is not due to the Treeview component. We suspect that the issue you are facing while using the await operation is due to antivirus or firewall is blocking the connection.

When you use await with GetApiData(), the code waits asynchronously for the API call to complete before proceeding further. If the connection is blocked at the moment “await GetApiData();” is called, the code will wait for the timeout period specified by HttpClient (which is typically a few seconds) before throwing an exception due to the failed connection attempt. This is why you see the exception when using await.

On the other hand, if you don't use await with GetApiData(), the code initiates the API call but doesn't wait for it to complete. It continues execution immediately after calling GetApiData(). If the connection is blocked at that exact moment, the exception might not occur immediately because the code doesn't wait for the connection to succeed or fail.

In brief, not using await with GetApiData() doesn't necessarily mean the connection is successful. It just means that the exception might occur at a different point in your code flow, such as when you try to use the API response.

We kindly suggest you to disable the antivirus or firewall to see if the code works as expected with await or test the API endpoint using tools like Postman or cURL to verify that it is accessible from your machine without any blocking issues.

Kindly try out the shared details and get back to us if you need further assistance.

Regards,

Jafar

[Balaji]

Hello,

we are not getting any exception from the api call with await and we are able to get the child nodes and bind data.

After binding we are getting spinner icon for the parent node.

Re iterating my statement that we are not getting any exception from api call ( await with GetApiData()) .

Result is success and able to get child nodes and binding to treeview.

Even you can try with sample api with dummy data and able to reproduce.

Also I am stating that, there are no firewalls and no antivirus.. that blocks API calls.

Please could you reply immediately .. waiting for one day is blocking our development.

[Jafar Ali Shahulhameed]

Hi Balaji,

Sorry for the inconveniences,

We were able to replicate the issue from our end. We kindly suggest you to make the below code change to resolve the issue.

[Home.razor]

 

private async Task NodeExpanding(NodeExpandEventArgs args)

{

   …

   …

}

Kindly try out the shared detail and get back to us if you need further assistance.

Regards,

Jafar

[Balaji]

Hi Sorry for late reply.. Issue resolved. Thank you.

[Shereen Shajahan]

Hi Balaji

Please get back to us for assistance in the future.

Regards,

Shereen