feat: add Loading property to FluentTreeItem and display FluentProgressRing in place of the expand/collapse button

[xperiandri]

🙋 Feature Request

When I expand a FluentTreeItem I want its child items to check if they have subitems and load them.
While this happens I want to indicate that action with FluentProgressRing in place of the expand/collapse button which will visually clue a user that the item may have subitems but they are loading

🤔 Expected Behavior

When Loading property is true instead of the expand/collapse button FluentProgressRing is rendered

😯 Current Behavior

No Loading property exist

🔦 Context

I have my items pre-chached in an indexed db and I want them lazily load for subitems when a particular tree hierarchy is expanded.

💻 Examples

@inherits SkillGro.Teams.Client.Logic.Components.DepartmentTreeItem.Logic
@implements IDisposable
@using Base = SkillGro.Teams.Client.Logic.Components.DepartmentTreeItem

<CascadingValue Value="this">

    <FluentTreeItem @ref="treeItem" InitiallyExpanded="@InitiallyExpanded">
        <FluentIcon Value="@(Icon.FromImageUrl("/asset/department.svg"))" Color="Color.Neutral" />

        @foreach (var department in Model.SubDepartments)
        {
            <DepartmentTreeItem Department="@department" />
        })

    </FluentTreeItem>

</CascadingValue>

@code {
    private FluentTreeItem treeItem = default!;

    private DepartmentTreeItem? parent;
    [CascadingParameter] public DepartmentTreeItem? Parent
    {
        get => parent;
        set
        {
            if (parent is not null)
            {
                parent.ExpandedChanged = ExpandedChnagedCallback;
            }
            parent = value;
            if (parent is not null)
            {
                parent.ExpandedChanged = ExpandedChnagedCallback;
            }
        }
    }
    [Parameter] public bool InitiallyExpanded { get; set; }
    [Parameter] public EventCallback<bool> ExpandedChanged
    {
        get => treeItem.ExpandedChanged;
        set => treeItem.ExpandedChanged = value;
    }

    private EventCallback<bool> ExpandedChnagedCallback => EventCallback.Factory.Create<bool>(this, OnExpandedChanged);
    private void OnExpandedChanged(bool expanded)
    {
        if (expanded)
        {
            Dispatch.Invoke(Base.Message.LoadDepartmentsAndPositions);
        }
    }

    public void Dispose()
    {
        GC.SuppressFinalize(this);
        if (parent is not null)
        {
            parent.ExpandedChanged = EventCallback<bool>.Empty;
        }
    }
}

module SkillGro.Teams.Client.Logic.Components.DepartmentTreeItem

open FSharp.Collections.Immutable
open Elmish
open SkillGro.Bolero

open SkillGro.Primitives
open SkillGro.Data.Shared
open SkillGro.Teams.Client.Data

type Model = {
    Department : Department
    SubDepartments : Department FlatList
    Positions : EmployeePosition FlatList
}

type Message =
    | LoadDepartmentsAndPositions
    | SetDepartment of Department
    | SetSubDepartments of Department FlatList
    | SetPositions of EmployeePosition FlatList

open Microsoft.AspNetCore.Components

type Logic () =
    inherit ProgramComponent<Model, Message> ()

    let init () =
#if DEBUG
        {
            Department = {
                Id = GuidId.newGuid()
                ParentId = ValueNone
                Name = DepartmentName.createOrFail "Test"
                Description = ValueNone
                CulturePreferences = FlatList.Empty
            }
            SubDepartments = FlatList.ofSeq [
                { Id = GuidId.newGuid(); ParentId = ValueNone; Name = DepartmentName.createOrFail "Test"; Description = ValueNone; CulturePreferences = FlatList.Empty }
            ]
            Positions = FlatList.ofSeq [
                { Id = GuidId.newGuid(); DepartmentId = GuidId.newGuid() |> ValueSome; Name = PositionName.createOrFail "Test"; Description = ValueNone; Requirements = ValueNone }
            ]
        }
        , Cmd.none
#else
        { Departments = FlatList.Empty; Positions = FlatList.Empty }, Cmd.none
#endif

    let update msg model =
        match msg with
        | LoadDepartmentsAndPositions ->
            let cmd = Cmd.none
                //Cmd.OfAsync.perform
                //    (fun _ ->
                //        async {
                //            let! departments = treeItem.Departments
                //            let! positions = treeItem.Positions
                //            return SetDepartments departments, SetPositions positions
                //        })
                //    id
            model, cmd
        | SetDepartment department -> { model with Department = department }, Cmd.none
        | SetSubDepartments departments -> { model with SubDepartments = departments }, Cmd.none
        | SetPositions positions -> { model with Positions = positions }, Cmd.none

    [<Parameter>]
    member treeItem.Department
        with get () : Department = treeItem.Model.Department
        and set department = treeItem.Dispatch (SetDepartment department)

    override page.Program =
        let update = update

        Program.mkProgram (fun _ -> init ()) update (fun _ _ -> Bolero.Node.Empty())

[vnbaaij]

Hi Andrii,
I think this would need to be supported on the web component and not on the Blazor side. We might be able to 'hack' it in but I don't feel that would be the best way.
There exists an expandCollapseGlyph all the way up in the FAST tree-item.template.ts file but I don't know of a way to maipulate that from our side.

I'll convert this to a discussion to see if this functionality has broader interest