Add admin videos loading animation

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">

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;
+}

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({
+    }).pipe(finalize(() => this.loading = false))
-      next: resultList => {
+      .subscribe({
-        this.videos = resultList.data
+        next: resultList => {
-        this.totalRecords = resultList.total
+          this.videos = resultList.data
-      },
+          this.totalRecords = resultList.total
+        },
 
-      error: err => this.notifier.error(err.message)
+        error: err => this.notifier.error(err.message)
-    })
+      })
   }
 
   private async removeVideos (videos: Video[]) {