utterances-bot commented 4 years ago

Bipin Paul - Display spinner on each API call automatically in Blazor

Bipin Paul's Blog

https://bipinpaul.com/posts/display-spinner-on-each-api-call-automatically-in-blazor

imclint21 commented 4 years ago

Hey,

Sounds really good, how to do that but without any API call, just basic page loading?

Cheers

iAmBipinPaul commented 4 years ago

HI @clintnetwork you can try this awesome library to show spinner. https://github.com/faso/Faso.Blazor.SpinKit

githubavi commented 4 years ago

Aeesome, Bipin

juliojesus commented 4 years ago

Hi, how can I use this in a Blazor server App?

iAmBipinPaul commented 4 years ago

Hi @juliojesus in the case of sever apps. if you are making any Http call to some api then you can do this in the same way it works in client side version but if there is no Http call then you can not do this in server app as there is no http call.

May be you can use this blazor component to control spinner manually. https://github.com/faso/Faso.Blazor.SpinKit

With HttpClient Factory

In the case of Client side you need to register SpinnerService as Singleton instead of Scoped and it should work with HttpClient Factory.
In the case of balzor sever app we can not register SpinnerService as Singleton as we can not share same spinner across all the connected browser.

Reference Life time of HttpMessageHandler in HttpClient Factory

https://docs.microsoft.com/en-us/dotnet/architecture/microservices/implement-resilient-applications/use-httpclientfactory-to-implement-resilient-http-requests#httpclient-lifetimes

Lakshpiya commented 4 years ago

Not working for me, how to call this on button click and wait until API response

iAmBipinPaul commented 4 years ago

@Lakshpiya It should work. I will update my sample project to latest stable version of Blazor.

Lakshpiya commented 4 years ago

I am able to add spinner on API call, but if i want to add spinner on same page any click event. Like i click on checkbox header so first i want to load spinner then data binding. Please advice.

iAmBipinPaul commented 4 years ago

Hi @Lakshpiya You can inject SpinnerService in any page and then call Show() to show the spinner and Hide() to hide the spinner.

@page "/counter"
@inject  SpinnerService  SpinnerService

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        SpinnerService.Show();
        currentCount++;
       SpinnerService.Hide();
    }
}

Lakshpiya commented 4 years ago

Thank you I did this. I was missing statechange, after that it has started to work.

On Wed, Sep 23, 2020 at 5:02 PM Bipin Paul notifications@github.com wrote:

Hi @Lakshpiya https://github.com/Lakshpiya You can inject SpinnerService in any page and then call Show() to show the spinner and Hide() to hide the spinner.

@page "/counter"@inject SpinnerService SpinnerService

Counter

Current count: @currentCount

<button class="btn btn-primary" @onclick="IncrementCount">Click me @code { private int currentCount = 0;
private void IncrementCount()
{
    SpinnerService.Show();
    currentCount++;
   SpinnerService.Hide();
}
}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/iAmBipinPaul/bipinpaul.com/issues/4#issuecomment-697349719, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFPKDDMRTB6XXXJSG2IMETLSHHWXTANCNFSM4ML5I6PQ .

--

Rahul Gupta 91+ 8826784480 / 9313071161

Lakshpiya commented 4 years ago

Hello Bipin, do you any solution for the CORS error blazor web assembly application I am getting CORS error and unable to communicate with third party service. I need to create PROXY API for the CORS problem

bbqchickenrobot commented 3 years ago

Anybody get this working with .Net 5 Blazor ? Can't seem to load the WasmHttpMessageHandler type

srksenthilkumar commented 3 years ago

Hello Bipin, In my case, Spinner Component's OnInitialized() did not get executed when I add a Spinner Component in MainLayout.razor. Where as it is working fine when I add Spinner Component in any other Component.

It results OnShow and OnHide events of SpinnerService become Null and Loader is not appearing.

Do you have any Idea why it is not working when added in MainLayout.razor.

iAmBipinPaul commented 3 years ago

Anybody get this working with .Net 5 Blazor ? Can't seem to load the WasmHttpMessageHandler type

Hi , @bbqchickenrobot

Sample has been updated to .NET 5

https://github.com/iAmBipinPaul/BlazorDisplaySpinnerAutomatically

iAmBipinPaul commented 3 years ago

Hi , @srksenthilkumar Here is sample that is updated to .NET 5

https://github.com/iAmBipinPaul/BlazorDisplaySpinnerAutomatically

iAmBipinPaul commented 3 years ago

Hello Bipin, do you any solution for the CORS error blazor web assembly application I am getting CORS error and unable to communicate with third party service. I need to create PROXY API for the CORS problem

@Lakshpiya may be do a quick search on web , you will find the solution.

tkardaridis commented 3 years ago

I have the same problem with the click event as . From Http calls is working. On startup is working. On Button Click event is not working. By debugging the code the ShowSpinner() function is getting called but the spinner does not show up. This was working on previous version of blazor and .net core. To be more specific i have two applications with the same implementation. In the first application which is .net core 3.1 it works, in the second application which is .net core 5 it does not work from click events. And I have the StateHasChanged in the Spinner component. Any suggestions?

Phil-123 commented 3 years ago

In case there are more calls to the service and it is necessary to hide the spinner only when all the functions have finished, how is it possible to proceed?

iAmBipinPaul commented 3 years ago

Hi , @tkardaridis

, in the second application which is .net core 5 it does not work from click events. And I have the StateHasChanged in the Spinner component. Any suggestions?

can you please share minimal sample project.

The sample project has been updated to .net 5

https://github.com/iAmBipinPaul/BlazorDisplaySpinnerAutomatically

may be going throw it once should help

iAmBipinPaul commented 3 years ago

Hi , @Phil-123

In case there are more calls to the service and it is necessary to hide the spinner only when all the functions have finished, how is it possible to proceed?

In the correct implementation we have just one global spinner so as of now I'm not sure how we can do this here.

May be can have spinner for individual component level

https://github.com/EdCharbeneau/BlazorPro.Spinkit