Два проверенных метода улучшения пользовательского опыта

Почти в каждом приложении Angular есть счетчик загрузки. Когда пользователь выполняет действие, которое запускает длительную задачу, например HTTP-запрос, счетчик загрузки может предоставить пользователю визуальную обратную связь о том, что приложение работает над запросом.

Когда пользователь видит счетчик, его мозг настроен на то, что задача будет выполнена в ближайшее время, что сокращает время ожидания. Другими словами, это помогает улучшить воспринимаемую производительность.

В этой статье мы обсудим два способа показать счетчик в приложении Angular: с помощью наложения и с помощью шаблона.

Реализовать оверлейный счетчик с глобальным перехватчиком

Один из способов показать счетчик загрузки — использовать наложение. Оверлей — это прозрачный контейнер, который отображается поверх существующего содержимого и занимает весь экран. Он обычно используется для блокировки пользователей от взаимодействия со страницей.

Во-первых, давайте создадим SpinnerService.

@Injectable({
  providedIn: 'root',
})
export class SpinnerService {
  public loading$: Observable<boolean>;
  private _loading$: BehaviorSubject<boolean> = new BehaviorSubject(false);

  public constructor() {
    this.loading$ = this._loading$.asObservable();
  }

  set(loading: boolean) {
    this._loading$.next(loading);
  }
}

В SpinnerService мы создали частное свойство _loading$ как BehaviorSubject, что позволяет передавать текущее значение новым подписчикам и отслеживать последнее переданное значение. Сервис предоставляет следующие

  • наблюдаемый loading$, на который можно подписаться.
  • Set метод, позволяющий изменять состояние загрузки.

Затем мы можем создать компонент счетчика, используя счетчик материала.

<div *ngIf="isLoading$ | async" class="main-container">
  <div class="loading-container">
    <mat-spinner color="warn"></mat-spinner>
  </div>
</div>

// Component class
export class OverlaySpinnerComponent{
  isLoading$ = this.spinnerService.loading$;
  constructor(public spinnerService: SpinnerService) {}
}

Шаблон компонента содержит элемент счетчика Material Design <mat-spinner> с цветом warn. В классе компонента мы определили свойство isLoading$ , которому присваивается значение свойства loading$ из файла spinnerService. Эта служба внедряется в конструктор и используется для отслеживания состояния загрузки приложения.

Чтобы создать наложение в Angular, мы можем использовать CSS для форматирования компонента счетчика.

.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 56px;
    right: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

Ключом к этому подходу является перехватчик. Служба ApiInterceptor перехватывает все HTTP-запросы и ответы и устанавливает для состояния загрузки значение true перед отправкой запроса и значение false, когда ответ получен через SpinnerService. Это позволяет нам показывать и скрывать счетчик загрузки в зависимости от состояния HTTP-запросов приложения.

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
  constructor(private spinnerService: SpinnerService) {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    this.spinnerService.set(true);
    return next.handle(request).pipe(
      finalize(() => {
        this.spinnerService.set(false);
      })
    );
  }
}

Служба-перехватчик должна быть зарегистрирована в AppModule, чтобы быть эффективной.

//app.module.ts  
providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true,
    },
  ]

Наконец, мы готовы использовать только что созданный счетчик.

<div>
  <button (click)="load()">Click here to show overlay spinner</button>
  <app-overlay-spinner></app-overlay-spinner>
</div>
// OverlayDemoComponent
export class OverlayDemoComponent{
  public data: any;
  constructor(private apiService: ApiService) {}

  load() {
    this.apiService.getData().subscribe((data) => {
      this.data = data;
    });
  }
}

Счетчик загрузки будет отображаться при запуске вызова API.

Спиннер на основе шаблона с Observable

Другой подход к отображению счетчика загрузки в Angular — использование шаблона. Шаблон — это фрагмент HTML, отображаемый внутри компонента или директивы.

Чтобы создать шаблон для счетчика загрузки, директива ng-template используется для определения шаблона, а директива *ngIf предназначена для отображения или скрытия шаблона на основе логического значения.

Вот пример использования шаблона для счетчика загрузки.

<div>
  <button (click)="load()">Click here to show spinner</button>
  <app-loading-spinner *ngIf="loading$ | async; else contentBlock"></app-loading-spinner>
  <ng-template #contentBlock>
    <div>
      <h4>Content loaded</h4>
    </div>
  </ng-template>
</div>

// LoadingSpinnerDemoComponent
export class LoadingSpinnerDemoComponent{
  loading$ = new BehaviorSubject<boolean>(false);

  load() {
    // simulate a service call
    this.loading$.next(true);
    setTimeout(() => {
      this.loading$.next(false);
    }, 3000);
  }
}

Класс LoadingSpinnerDemoComponent содержит наблюдаемый объект loading$ для отображения и скрытия счетчика загрузки. Метод load() используется для моделирования вызова службы и обновляет значение loading$.

В шаблоне LoadingSpinnerDemoComponent мы используем компонент app-loading-spinner для отображения счетчика. Мы можем продолжать использовать счетчик материалов или использовать другие методы, включая классный шрифт или пользовательский CSS. Ниже приведены несколько примеров.

<!-- material design spinner -->
<div style="display: flex; justify-content: center">
  <mat-spinner color="info"></mat-spinner>
</div>
<!-- fontawesome style -->
<div style="display: flex; justify-content: center">
  <div class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom" style="line-height: 100px"></div>
  <div class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom" style="line-height: 100px"></div>
  <div class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom" style="line-height: 100px"></div>
</div>

Спиннер будет выглядеть так

Метод на основе шаблона — мой предпочтительный подход. Это простое и гибкое приложение, позволяющее отображать и скрывать часть страницы или всю страницу.

Краткое содержание

Таким образом, мы рассмотрели два метода отображения счетчика загрузки в приложении Angular: использование наложения и использование шаблона.

Однако есть много других способов реализовать счетчик загрузки в Angular, например, использование сторонней библиотеки или создание пользовательской директивы. Важно выбрать метод, который наилучшим образом соответствует потребностям и стилю вашего приложения. Вы можете получить доступ к примеру кода, упомянутому в этой статье здесь.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.