Отображение индикатора загрузки страницы перед загрузкой страницы - PullRequest
Новая
       14

Отображение индикатора загрузки страницы перед загрузкой страницы

1 голос
/ 04 августа 2020

Недавно в Blazor я обнаружил, что использование RenderMode из ServerPrerendered в сочетании с вызовом начальных данных в OnInitializedAsync приводит к тому, что OnInitializedAsync вызывается дважды. Это вызывает краткое сообщение пользовательского интерфейса fla sh, и, если я не извлекаю данные из кеша, а прямо из базы данных, выполняется дополнительный вызов db, не bueno. Поэтому я переключился на использование OnAfterRenderAsync и вызов только тогда, когда firstRender истинно. Это позаботится о дополнительном вызове и не имеет пользовательского интерфейса fla sh, это выглядит лучше. Однако есть краткий момент, когда отображается не вся страница, и я жду ее загрузки. Я бы хотел реализовать полосу загрузки в верхней части страницы, чтобы отображать прогресс загрузки, аналогично тому, что делает YouTube.

Мне было интересно, какие события жизненного цикла происходят с момента нажатия гиперссылки на страницу, которую мне нужно использовать, чтобы это произошло? Я также предполагаю, что мне нужно будет использовать Singleton AppState для отслеживания прогресса загрузки на основе некоторого текущего значения по сравнению с общим значением, чтобы сгенерировать процент выполнения индикатора.

Думаю, я знаю, что делаю, и я Я начинаю пробовать, но мне было интересно, какие еще решения вы, ребята, придумали в Blazor? Есть какие-нибудь советы или предложения?

1 Ответ

1 голос
/ 04 августа 2020

Я просто использую метод жизненного цикла OnInitializedAsyn c до тех пор, пока вы вызываете данные с помощью асинхронного c метода, например следующего: 

    protected override async Task OnInitializedAsync()
    {
        try
        {
            Employees = (await EmployeeDataService
        .GetAllEmployees(JobCategory?.JobCategoryId))
        .ToList();
            if (JobCategory != null)
            {
                Title = $"{JobCategory.JobCategoryName} Employees";
            }
        }
        catch (Exception e)
        {
            _loadFailed = true;
            ExceptionMessage = e.Message;
        }
    }

Тогда в бритве различные проверки и отображение загрузчика, если данные еще не загружены: 

    @if (Employees == null && _loadFailed == true)
    {
        <h1 class="text-danger">
          The data failed to load please try again in a little while..
        </h1>
        <h6>@ExceptionMessage</h6>
    }
    else if (Employees== null)
    {
    <div style="display:normal;margin:auto" class="loader"></div>
    }
    else if (Employees.Count==0)
    {
    <p>No employees match the criteria with a job category of 
       @JobCategory.JobCategoryName.</p>
    }
    else...

CSS для загрузчика должен существовать на сайте. CSS: 

    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }
...