Blazor API 호출 중에 로딩 표시기를 효과적으로 표시하는 방법은 무엇입니까?

Blazor에서 API 호출 중에 대기 커서 또는 회전자를 표시하는 방법

문제:
긴- Blazor 앱에서 API 호출을 실행하려면 대기 커서 또는 대기 커서와 같은 시각적 피드백을 사용자에게 제공하는 방법이 필요합니다. 로딩 스피너. 그러나 CSS를 사용하여 이러한 상태를 수동으로 전환하면 페이지가 즉시 새로 고쳐지지 않을 수 있습니다.

해결 방법 1: Task.Delay(1) 사용

• 비동기 생성 장기 실행 작업을 실행하는 메서드입니다.
• 비동기 메서드 내에서 wait Task.Delay(1)를 사용합니다. 또는 Task.Yield()를 기다려 변경 사항을 플러시합니다.

private async Task AsyncLongFunc()
{
    spinning = true;
    await Task.Delay(1); // flush changes
    LongFunc(); // non-async code
    currentCount++;
    spinning = false;
    await Task.Delay(1); // flush changes again
}

해결 방법 2: Task.Run() 사용(WebAssembly용 아님)

• 장기 실행 작업을 작업으로 래핑합니다.
• await를 사용하세요. Task.Run()은 별도의 스레드에서 작업을 실행합니다.

async Task AsyncLongOperation()
{
    spinning = true;
    await Task.Run(() => LongOperation());
    currentCount++;
    spinning = false;
}

서버 측 사전 렌더링에 대한 고려 사항:

• Spinner는 사전 렌더링된 Blazor Server 앱에 표시되지 않습니다.
• 스피너, OnAfterRenderAsync 수명 주기 메서드에서 긴 작업을 수행합니다.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await Task.Run(() => LongOperation()); // or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

위 내용은 Blazor API 호출 중에 로딩 표시기를 효과적으로 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!