Blog

아래 그림과 같이 Blazor loading indicator 표시하는 방법입니다.

Employee 목록 component

EmployeeList 구성 요소와 같은 구성 요소는 서버에서 비동기적으로 데이터를 검색합니다.

일반적으로 비동기 작업인 서버 측 서비스를 호출하여 데이터베이스에서 직원을 검색합니다.

구성 요소가 렌더링될 때까지 이 비동기 작업이 완료되지 않았을 수 있습니다.

이는 Employees 속성이 null일 수 있고 NullReference 예외가 발생할 수 있음을 의미합니다.

EmployeeListBase.cs

public class EmployeeListBase : ComponentBase
{
    public IEnumerable<Employee> Employees { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Run(LoadEmployees);
    }

    private void LoadEmployees()
    {
        System.Threading.Thread.Sleep(2000);
        // Retrieve data from the server and initialize
        // Employees property which the View will bind
    }
}

Employees 속성이 null 인 동안 로딩바가 표시됩니다. 비동기 작업이 완료되고 직원 데이터가 채워지는 즉시 직원 목록이 표시됩니다.

EmployeeList.razor

@if (Employees == null)
{
    <div class="spinner"></div>
}
else
{
    <div class="card-deck">
        @foreach (var employee in Employees)
        {
            <div class="card m-3">
                <div class="card-header">
                    <h3>@employee.FirstName @employee.LastName</h3>
                </div>
                <img class="card-img-top imageThumbnail" 
                     src="@employee.PhotoPath" />
            </div>
        }
    </div>
}

loading indicator 디자인을 하기위해 CSS 를 사용하고 있습니다. wwwroot/css/site.css 파일 에 다음 CSS를 배치합니다 . 스피너의 모양과 느낌을 응용 프로그램 페이지와 일치시키려면 스피너 클래스에서 그에 따라 css 속성을 변경할 수 있습니다.

css 에서 스피너 색상을 Red 로 변경하려면 border-top 속성을 16px solid red 로 설정합니다 .

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}