Try to prevent layout shift with redundancy stats

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 8d669b62d37351fe00500547a61a47b1b99df894..2b52d3fd8750e6375c404feaf0e0f78f1eb1ef94 100644 (file)
--- 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 b31c5b35e6537e3c6ec1c816fcbc655a2f5bc673..d7676ab094e84aab77d28f2f9a2ca1ef6ab76b7c 100644 (file)
--- 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),
                       })
   }