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,11 +138,14 @@ 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))
+      .subscribe({
         next: resultList => {
           this.videos = resultList.data
           this.totalRecords = resultList.total