Slow rendering

[djordjedjukic]

Hi,

I have an issue with slow rendering when the page has more elements. I am creating a clone of one website which is working nicely.

So I am rendering 200 cards that represent Lego set info. Also when I am filling the dropdown with 450 elements, the page becomes unresponsive. I will share the gif of what that looks like and the code.

I don't know if that is an expected behavior of bolero/blazor or if I am doing something wrong?

This example is without dropdown because it can't render dropdown at all.

type Page = Template<"Pages/Sets/data.html">

let showSet (set: Set) =
    Page
        .SetData()
        .SetNumber(set.Number)
        .SetName(set.Name)
        .SetImageUrl(set.ImageUrl)
        .ThemeName(set.ThemeName)
        .Year(set.Year.ToString())
        .NumberOfParts(set.NumberOfParts.ToString())
        .Elt()
        
        let listSets model dispatch =
    let toggleDropdown _ = dispatch ToggleDropdown
    let triggerSearch dispatch =
        fun (e: ChangeEventArgs) ->
            let value = e.Value.ToString()
            dispatch (SearchSets value)

    let dropdownVisibilityClass = if model.IsDropdownOpen then "" else "hidden"

    Page()
        (*.DropdownOptions(
            forEach model.Themes <| renderOption
                
        )*)
        .TriggerSearch(triggerSearch dispatch)
        .ToggleDropdown(toggleDropdown)
        .DropdownVisible(dropdownVisibilityClass)
        .Rows(
            cond model.Sets
            <| function
                | None -> empty ()
                | Some sets -> forEach sets <| showSet
        )
        .Elt()

let view model dispatch = listSets model dispatch