angular7 - 引っ張っている間にコンテンツの上に表示されるテキストを更新するイオン4プル

Question

こんにちはイオン4 / angular7を使用しています

リフレッシュするためにプルを実装したいのですが、このようにしました：

  <ion-refresher slot="start"
             (ionRefresh)="ionRefresh($event)"
             (ionPull)="ionPull($event)"
             (ionStart)="ionStart($event)">
<ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Pull to refresh"
        refreshingSpinner="circles"
        refreshingText="Refreshing...">
</ion-refresher-content>

そしてコントローラーで

 ionRefresh(event) {
    console.log('Pull Event Triggered!');
    setTimeout(() => {
      console.log('Async operation has ended');

  //complete()  signify that the refreshing has completed and to close 
  the refresher
      event.target.complete();
    }, 2000);
  }
  ionPull(event){
    //Emitted while the user is pulling down the content and exposing the 
  refresher.
    console.log('ionPull Event Triggered!');
  }
  ionStart(event){
    //Emitted when the user begins to start pulling down.
    console.log('ionStart Event Triggered!');
  }

これは機能しますが、いくつかの奇妙な効果が見られます。テキストを下に引っ張って更新すると、コンテンツの上にカーソルが移動し、リフレッシャーを閉じても、テキストの更新が 1 秒または 2 秒間表示されたままになります。これにより、見栄えが悪くなります。どうすればこれを修正できますか?

また、リフレッシャーにスタイルを追加する必要がありました。そうしないと、リフレッシャーの背景が黒く、テキストが表示されないため、これを追加しました。

<style>
  ion-content {
    background-color: #efefef;
    color:#555;
  }
  ion-refresher {
    z-index:1;
  }

動作を示すGIFを作成しました