This is a migrated thread and some comments may be shown as answers.

How to implement a blocking div for longer running method?

6 Answers 142 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
BitShift
Top achievements
Rank 1
Veteran
BitShift asked on 14 Oct 2019, 01:59 PM

There are various "blocking ui" solutions and examples on the inter-web that allow you to block part or all of the UI while some longer-than-normal process takes place.  Eg.  a user clicks a button that has to load and process some data.

One example done with Angular is this
https://embed.plnkr.co/plunk/bNfRvD

How can we implement something similar with Blazor AND not resort to javascript interop?

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 14 Oct 2019, 03:27 PM

Hello,

The following features request offers a workaround for the time being: https://feedback.telerik.com/blazor/1408055-busy-indicator-which-is-mvvm-friendly. I have added your vote and you may want to Follow the item as well.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
BitShift
Top achievements
Rank 1
Veteran
answered on 14 Oct 2019, 03:32 PM

Here is maybe another option?
https://github.com/BlazorExtensions/SignalR

 

0
Marin Bratanov
Telerik team
answered on 14 Oct 2019, 03:37 PM

Hi,

Could you elaborate a little on this link? From what I gather, it is a wrapper for easier configuration of SignalR hubs and not a loading sign for long-running operations that plugs into the Blazor rendering. Am I missing something?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
BitShift
Top achievements
Rank 1
Veteran
answered on 14 Oct 2019, 03:49 PM

No, you are correct.  However, I shared the link to the Extensions after seeing this thread
https://www.telerik.com/forums/build-app-with-mvc-core-signalr-vs-blazor-signalr

Here is an example I found using this extension
https://dotnetthoughts.net/building-blazor-apps-with-signalr/

However, maybe a simpler approach might be something like this:
https://blog.jonblankenship.com/2018/10/19/adding-a-loading-spinner-to-a-button-with-blazor/

After all, the original intent was to block the user from the entire UI (while showing a spinner) while the long process completed.
While the use of SignalR in the above cases offers up some interesting scenarios, for what Im trying to do, I think simply showing/hiding a div overlay would suffice.  Most of these solutions utilize setting the z-order of the element and/or setting opacity etc.  Just something to keep the users from clicking on anything until the process is "done".

 

0
BitShift
Top achievements
Rank 1
Veteran
answered on 14 Oct 2019, 04:16 PM
So the use of SignalR could very likely enable a "progress" indicator to be built, as well as more complex client-server interactions, or so it would seem?
0
Accepted
Marin Bratanov
Telerik team
answered on 14 Oct 2019, 06:48 PM

Indeed, a <div> with a sufficiently high z-index is usually the thing that gets rendered. This is why I suggested the TelerikWindow approach from the public page, as it is easier to show from C#: showing and size.

<TelerikButton OnClick="@DoLongWork">Do long work</TelerikButton>

<TelerikWindow @bind-Visible="@LoadingSignVisible" Modal="true">
    <WindowTitle>
        <strong>Please Wait</strong>
    </WindowTitle>
    <WindowContent>
        @*Add animated gif and styling to taste*@
        Please wait...we are processing your request.
    </WindowContent>
</TelerikWindow>

@code {
    bool LoadingSignVisible { get; set; }

    //this method must be async so the UI can be updated while waiting for the remote service
    async Task DoLongWork()
    {
        LoadingSignVisible = true;

        await Task.Delay(3000);//simulate long running operation

        LoadingSignVisible = false;
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Tags
General Discussions
Asked by
BitShift
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
BitShift
Top achievements
Rank 1
Veteran
Share this question
or