Telerik Blazor Editor too slow on wasm when inside an <EditForm>

[Amanatios Amanatidis]

Hello,

When using the Blazor Editor I noticed a very large degradation in performance when the user is typing, if the Editor is inside an <EditForm>. I tried increasing the UpdateInterval to 500ms but it did not help much. When the user types fast, the text in the editor lags behind (appears very slowly).

When used outside an <EditForm> then the problem goes away.

Here is a code sample that reproduces the problem (in blazor WASM)

@inherits OwningComponentBase
@page "/TestEditor"
@using Telerik.Blazor.Components.Editor


<EditForm Model="Model">
    <DataAnnotationsValidator />
    <TelerikEditor Tools="@Tools" @bind-Value="@Model.Content" @ref="EditorRef" Height="500px">
        <EditorCustomTools>
            <EditorCustomTool Name="Keywords">
                <TelerikButtonGroup>
                    <ButtonGroupButton OnClick="Tag1"
                                       IconClass="k-i-background k-icon back-color" Title="Tag1" />
                    <ButtonGroupButton IconClass="k-i-foreground-color k-icon fore-color" Title="Fore Color" />
                </TelerikButtonGroup>
            </EditorCustomTool>
        </EditorCustomTools>
    </TelerikEditor>
</EditForm>

@code {

    public class EditorModel
    {
        public string Content { get; set; }
    }

    public EditorModel Model { get; set; } = new EditorModel();
    public TelerikEditor EditorRef { get; set; }

    public List<IEditorTool> Tools { get; set; } = new List<IEditorTool>() {

            new EditorButtonGroup(new Bold(), new Italic(), new Underline()),
            new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight()),
            new UnorderedList(),
            new EditorButtonGroup(new CreateLink(), new Unlink(), new InsertImage()),
            new InsertTable(),
            new EditorButtonGroup(new AddRowBefore(), new AddRowAfter(), new MergeCells(), new SplitCell()),
            new Format(),
            new FontSize(),
            new FontFamily(),

        new CustomTool("Keywords")
        //new CustomTool("CleanFormattingTool"),
        //new CustomTool("InsertHtmlTools")
    };

    public async Task Tag1()
    {
        string tag1 = "{##Type##}";
        var temp = new HtmlCommandArgs("insertHtml", tag1);
        await EditorRef.ExecuteAsync(temp);
    }

}

[Marin Bratanov]

Hi Amanatios,

I have two suggestions for you to try first:

• increase the UpdateInterval value (read more about it here) so the ValueChanged event fires more rarely and thus, the re-renders on the component with the form are more rare.
• run the app in Release mode as there is a performance improvement then (read more here). The upcoming .NET 5 is also expected to bring general performance improvements in the framework.

I am attaching here a sample app and a short video that demonstrate this behavior and improvements (perhaps the Release mode difference is less pronounced in the video than in real life but I personally see a difference). The key improvement is in how often the EventCallback fires to re-render the parent component, of course.

Regards,
Marin Bratanov
Progress Telerik