Prevent displaying multiple times channels

client/src/app/+my-library/+my-video-channels/my-video-channels.component.html

@@ -2,7 +2,7 @@
   <span class="text-nowrap me-2">
     <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My channels</ng-container>
-    <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
+    <span *ngIf="this.pagination.totalItems" class="pt-badge badge-secondary">{{ this.pagination.totalItems }}</span>
   </span>
 
   <div>
@@ -24,7 +24,7 @@
   </a>
 </div>
 
-<div class="no-results" i18n *ngIf="totalItems === 0">No channel found.</div>
+<div class="no-results" i18n *ngIf="this.pagination.totalItems === 0">No channel found.</div>
 
 <div class="video-channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onChannelDataSubject.asObservable()">
   <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">

client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts

@@ -1,6 +1,6 @@
 import { ChartData, ChartOptions, TooltipItem, TooltipModel } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
-import { Subject } from 'rxjs'
+import { Subject, first, map, switchMap } from 'rxjs'
 import { Component } from '@angular/core'
 import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifier, ScreenService } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
@@ -11,8 +11,6 @@ import { formatICU } from '@app/helpers'
   styleUrls: [ './my-video-channels.component.scss' ]
 })
 export class MyVideoChannelsComponent {
-  totalItems: number
-
   videoChannels: VideoChannel[] = []
 
   videoChannelsChartData: ChartData[]
@@ -29,6 +27,8 @@ export class MyVideoChannelsComponent {
     totalItems: null
   }
 
+  private pagesDone = new Set<number>()
+
   constructor (
     private authService: AuthService,
     private notifier: Notifier,
@@ -47,8 +47,7 @@ export class MyVideoChannelsComponent {
     this.pagination.currentPage = 1
     this.videoChannels = []
 
-    this.authService.userInformationLoaded
-      .subscribe(() => this.loadMoreVideoChannels())
+    this.loadMoreVideoChannels()
   }
 
   async deleteVideoChannel (videoChannel: VideoChannel) {
@@ -89,19 +88,24 @@ export class MyVideoChannelsComponent {
   }
 
   private loadMoreVideoChannels () {
-    const user = this.authService.getUser()
-    const options = {
-      account: user.account,
-      withStats: true,
-      search: this.search,
-      componentPagination: this.pagination,
-      sort: '-updatedAt'
-    }
+    if (this.pagesDone.has(this.pagination.currentPage)) return
+    this.pagesDone.add(this.pagination.currentPage)
 
-    return this.videoChannelService.listAccountVideoChannels(options)
+    return this.authService.userInformationLoaded
+      .pipe(
+        first(),
+        map(() => ({
+          account: this.authService.getUser().account,
+          withStats: true,
+          search: this.search,
+          componentPagination: this.pagination,
+          sort: '-updatedAt'
+        })),
+        switchMap(options => this.videoChannelService.listAccountVideoChannels(options))
+      )
       .subscribe(res => {
         this.videoChannels = this.videoChannels.concat(res.data)
-        this.totalItems = res.total
+        this.pagination.totalItems = res.total
 
         // chart data
         this.videoChannelsChartData = this.videoChannels.map(v => ({