Unplanned
Last Updated: 25 Feb 2022 22:27 by ADMIN
Lee
Created on: 22 Feb 2022 10:30
Category: LoaderContainer
Type: Feature Request
5
Allow setting initial delay

In the AJAX suite, the LoadingPanel has a really useful property called InitialDelay, whereby if the operation executes in less time than the delay, the loading animation will not show, to avoid annoying flickering.

Please add such functionality for the Blazor Loader and LoaderContainer.

---

ADMIN EDIT

---

For the time being, you can add some delay before enabling the Visible parameter of the Loader and LoaderContainer.

@implements IDisposable
@using System.Timers

<TelerikButton OnClick="@DoFastWork">Do fast work (no loader)</TelerikButton>
<TelerikButton OnClick="@DoSlowWork">Do SLOW work (shows loader)</TelerikButton>
@result

<TelerikLoader Visible="@LoaderVisible"></TelerikLoader>

@* NOTE: This is a basic example - if you bash the button you will never see the loader.
    In a real case you may want to take care of that - hide the butotn with a loader container instead, or disable it, or debounce the clicks *@

@code{
    bool LoaderVisible { get; set; }
    Timer theTimer { get; set; }
    int minDelay { get; set; } = 1000;

    string result { get; set; }

    async Task DoFastWork()
    {
        InitTimer();

        await Task.Delay(300); //simulate fast task
        result = DateTime.Now.ToString();

        DisposeTimer();
        LoaderVisible = false;
    }

    async Task DoSlowWork()
    {
        InitTimer();

        await Task.Delay(3000); //simulate SLOW task
        result = DateTime.Now.ToString();

        DisposeTimer();
        LoaderVisible = false;
    }

    // the idea is that we never hit this event if things happen fast enough
    void OnTimedEvent(object source, ElapsedEventArgs e)
    {
        LoaderVisible = true;
        InvokeAsync(StateHasChanged);
    }

    void InitTimer()
    {
        DisposeTimer();

        theTimer = new System.Timers.Timer();
        theTimer.Elapsed += new ElapsedEventHandler(OnTimedEvent);
        theTimer.Interval = minDelay;
        theTimer.Enabled = true;
    }

    void DisposeTimer()
    {
        try
        {
            if (theTimer != null)
            {
                theTimer.Dispose();
            }
        }
        catch { }
    }


    public void Dispose()
    {
        DisposeTimer();
    }
}

1 comment
ADMIN
Marin Bratanov
Posted on: 25 Feb 2022 22:27

Hello Lee,

I updated the initial sample with code that achieve the old AJAX behavior more closely. If you hadn't implemented it yet, take a look again at the opener post.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.