記錄--Loading 用戶體驗 - 載入時避免閃爍

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

在切換詳情頁中有這麼一個場景，點擊上一條，會顯示上一條的詳情頁，同理，點擊下一條，會顯示下一條的詳情頁。

偽代碼如下所示：

我們定義了一個 switcher 模版， 用戶點擊上一條、下一條時調用 goToPreOrNext 方法。該頁面通過 loadingDone 狀態判斷是否展示載入效果。

// html
<thy-loading [thyDone]="loadingDone"></thy-loading>
<ng-container *ngIf="loadingDone">
	<styx-pivot-detail>
		...
		<thy-arrow-switcher
			...
		  (thyPrevious)="goToPreOrNext($event)"
		  (thyNext)="goToPreOrNext($event)"
		></thy-arrow-switcher>
	...
	</styx-pivot-detail>
</ng-container>

在 goToPreOrNext 方法中，當調用該方法時，通過 goToPreOrNextResolve 介面返回下一條的詳情 id，通過該 id 請求詳情數據。

// 請求下一條 id
fetchPreOrNext(event: ThyArrowSwitcherEvent) {
	...
	this.goToPreOrNextResolve(event.index, topicId).subscribe(
		(id: string) => {
			this.getDetail(id);
		}
		...
	)
}

// 請求詳情數據
getDetail(postId: string) {
	this.loadingDone = false;
	this.store
      .fetchPost(postId)
      .pipe(
          finalize(() => {
              this.loadingDone = true;
          })
      )
      .subscribe();
}

這看起來好像沒有什麼問題，應該一般都是這麼乾的，我們運行看看。