Rx Js Наблюдаемый для управления скелетами - PullRequest
Новая
       12

Rx Js Наблюдаемый для управления скелетами

0 голосов
/ 09 апреля 2020

У меня есть список с данными, загруженными вызовом покоя, и скелет, показанный во время вызова покоя: 

<div *ngIf="!loading; else skeleton">
    <span *ngFor="let item of items">{{item}}</span>
</div>
<ng-template #skeleton>
   <my-skeleton></my-skeleton>
</ng-template>

Цель: показать этот скелет только после заданного времени ожидания, потому что если REST вызов очень быстрый, будет ужасный эффект, как fla sh скелета. Идея такова: «Хорошо, если вызов займет более 500 мс, установите loading в true».

Есть ли какое-нибудь элегантное решение для этого с помощью наблюдаемых? Или я совершенно не прав?

(я подаю заявку Angular 9)

Спасибо!

1 Ответ

1 голос
/ 09 апреля 2020

С комбинацией concat, merge, mapTo и timer вы получите то, что вы хотите, я думаю: 

readonly restCall$ = this.http.get().pipe(
  shareReplay({ refCount: true, bufferSize: 1 })
);

readonly loading$ = concat(
  race(
    this.restCall$.pipe(
      mapTo(false)
    ),
    timer(500).pipe(
      mapTo(true)
    )
  ),
  this.restCall.pipe(
    mapTo(false)
  )
);

Вы измените свой шаблон на: 

<div *ngIf="!(loading$ | async); else skeleton">
    <span *ngFor="let item of items">{{item}}</span>
</div>
<ng-template #skeleton>
   <my-skeleton></my-skeleton>
</ng-template>

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

...