CODEWITHSUNDEEP
c#blazorblazor-webassemblymudblazor
Xenofono
Xenofono

Reputation: 219

MudBlazor Tree very slow when reaching 4 levels

I Have a tree in Blazor that needs to be 4 levels deep, at the moment there are 17 top level nodes and about 160 nodes in total. The largest branch right now has 25 nodes in it.

The problem is that using MudBlazors MudTree-component this tree becomes very slow to use, when you click a checkbox there's almost a 1 second delay before something happens.

I've implemented Equals and Hashcode for the class the tree is displaying and it might have made a difference but in that case it's too small to be clearly noticable.

Here's a fiddle that imitates what I'm working on and which has the same issue. Hopefully there's a way to get this working, thanks in advance!

https://try.mudblazor.com/snippet/wEQROSGBQKlWJqkD

Upvotes: 2

Views: 1118

Answers (2)

maria
maria

Reputation: 21

I actually was able to gather the reason the expansion is so slow is due to a css class. They set the animation-duration to 1s. I have no idea why they decided to set it so high but here we are.

I just had to add in my stylesheet:

.mud-collapse-entering{
  animation-duration: .2s !important }

Upvotes: 2

Ray
Ray

Reputation: 49

I went into the same problem as you. I figured out a workaround for the problem, you have to modify the original code though:

Under MudTreeView.razor Instead of loading all the children recursively at once:

<MudCollapse Expanded="@Expanded">
            <CascadingValue Value="@MudTreeRoot" IsFixed="true">
                <CascadingValue Value="this" IsFixed="true">
                    <MudTreeView Items="Items" ItemTemplate="MudTreeRoot.ItemTemplate" Class="mud-treeview-group">
                        @ChildContent
                    </MudTreeView>
                </CascadingValue>
            </CascadingValue>
</MudCollapse>

We can defer loading the children's tree by checking if the children's tree is expanded:

<MudCollapse Expanded="@Expanded">
    @if(Expanded)
    {
     <CascadingValue Value="@MudTreeRoot" IsFixed="true">
                <CascadingValue Value="this" IsFixed="true">
                    <MudTreeView Items="Items" 
            ItemTemplate="MudTreeRoot.ItemTemplate" Class="mud-treeview-group">
                        @ChildContent
                    </MudTreeView>
                </CascadingValue>
            </CascadingValue>
    }
</MudCollapse>

It loads a lot faster after I tried this. I hope this helps.

Upvotes: 1

Related Questions