Add admin videos loading animation

3 files changed, 21 insertions, 10 deletions

diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index dd4ab178e..67b554aaf 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -10,6 +10,7 @@
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} videos"
   (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+  [ngClass]="{ loading: loading }"
 >
   <ng-template pTemplate="caption">
     <div class="caption">
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index 158c161af..5ec9d4850 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -15,3 +15,7 @@ my-embed {
 .video-info > div {
   display: flex;
 }
+
+.loading {
+  opacity: 0.5;
+}
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
index 8bd171c53..ed3a86b96 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.ts
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -1,11 +1,12 @@
 import { SortMeta } from 'primeng/api'
+import { finalize } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
-import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
-import { UserRight, VideoPrivacy, VideoState, VideoStreamingPlaylistType } from '@shared/models'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoActionsDisplayType } from '@app/shared/shared-video-miniature'
+import { UserRight, VideoPrivacy, VideoState, VideoStreamingPlaylistType } from '@shared/models'
 
 @Component({
   selector: 'my-video-list',
@@ -51,6 +52,8 @@ export class VideoListComponent extends RestTable implements OnInit {
     liveInfo: false
   }
 
+  loading = false
+
   constructor (
     protected route: ActivatedRoute,
     protected router: Router,
@@ -135,18 +138,21 @@ export class VideoListComponent extends RestTable implements OnInit {
   protected reloadData () {
     this.selectedVideos = []
 
+    this.loading = true
+
     this.videoService.getAdminVideos({
       pagination: this.pagination,
       sort: this.sort,
       search: this.search
-    }).subscribe({
-      next: resultList => {
-        this.videos = resultList.data
-        this.totalRecords = resultList.total
-      },
-
-      error: err => this.notifier.error(err.message)
-    })
+    }).pipe(finalize(() => this.loading = false))
+      .subscribe({
+        next: resultList => {
+          this.videos = resultList.data
+          this.totalRecords = resultList.total
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
   }
 
   private async removeVideos (videos: Video[]) {