Unplanned
Last Updated: 25 Feb 2022 22:27 by ADMIN
Created by: Lee
Comments: 1
Category: LoaderContainer
Type: Feature Request
5

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();
    }
}

Unplanned
Last Updated: 12 Apr 2023 10:55 by Fernando

If I place a LoaderContainer inside the Dialog's content it is not rendered properly.

<AdminEdit>

Here are two possible workarounds:

  1. The loader container covers the entire page: REPL snippet.
  2. Use a Window (instead of the Dialog) and cover only the content of the Window: REPL snippet

</AdminEdit>