1 button disables another button while loading-CodePudding

I have a page with 2 buttons

button 1 will call a function on click and load data button 2 will save the data

i want it so that when button 1 is clicked, button 2 is disabled only UNTIL the data is loaded, then the user is "allowed" to click on button 2

i'm not sure how to accomplish this, i've tried disable property but my problem has been the following:

when button 1 is clicked, the function it calls runs to completion and ONLY then are the components/buttons refreshed, even with the first line of code in the function setting the button 2 disabled property to false and this.statehaschanged option

any help appreciated here

<button  @onclick="FetchOrder">Compare Data</button>
<button   @onclick="SyncOrder" disabled=@disableSync >Sync Eviz data to Monday board</button> 
@code{
private bool disableSync = true;

private void FetchOrder(){
   disableSync=true
   do stuff, call class function, do stuff
   disableSync=false
}

CodePudding user response：

Bind a bool to the disabled attribute on the second <button> .

<button @onclick=Button1Clicked>Button 1</button>

<button disabled=@button2Disabled @onclick=Button2Clicked>Button 2</button>

@code {
    bool button2Disabled = true;

    async Task Button1Clicked()
    {
        button2Disabled = true;
        await Task.Delay(3000);
        button2Disabled = false;
    }

    async Task Button2Clicked()
    {
        if (button2Disabled == false) // optional guard
        {            
        }
    }
}