Try to prevent layout shift with redundancy stats

2 files changed, 9 insertions, 2 deletions

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index 8d669b62d..2b52d3fd8 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -86,7 +86,7 @@
 </p-table>
 
 
-<div class="redundancies-charts" *ngIf="isDisplayingRemoteVideos()">
+<div class="redundancies-charts" *ngIf="isDisplayingRemoteVideos() && dataLoaded">
   <h6 i18n>Enabled strategies stats</h6>
 
   <div class="chart-blocks">
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index b31c5b35e..d7676ab09 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -26,6 +26,9 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
 
   noRedundancies = false
 
+  // Prevent layout shift for redundancy stats
+  dataLoaded = false
+
   private bytesPipe: BytesPipe
 
   constructor (
@@ -163,6 +166,8 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   }
 
   protected reloadDataInternal () {
+    this.dataLoaded = false
+
     const options = {
       pagination: this.pagination,
       sort: this.sort,
@@ -174,9 +179,11 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
                         next: resultList => {
                           this.videoRedundancies = resultList.data
                           this.totalRecords = resultList.total
+
+                          this.dataLoaded = true
                         },
 
-                        error: err => this.notifier.error(err.message)
+                        error: err => this.notifier.error(err.message),
                       })
   }