Add user notification animation

client/src/app/core/notification/user-notification-socket.service.ts

@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core'
 import { environment } from '../../../environments/environment'
 import { UserNotification as UserNotificationServer } from '../../../../../shared'
 import { Subject } from 'rxjs'
-import * as io from 'socket.io-client'
 import { AuthService } from '../auth'
 
 export type NotificationEvent = 'new' | 'read' | 'read-all'

client/src/app/menu/avatar-notification.component.html

@@ -1,6 +1,6 @@
 <div
   [ngbPopover]="popContent" autoClose="outside" placement="bottom-left" container="body" popoverClass="popover-notifications"
-  i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover"
+  i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover" (hidden)="onPopoverHidden()"
 >
   <div *ngIf="unreadNotifications > 0" class="unread-notifications">{{ unreadNotifications }}</div>
 
@@ -8,6 +8,7 @@
 </div>
 
 <ng-template #popContent>
+  <div class="content" [ngClass]="{ loaded: loaded }">
     <div class="notifications-header">
       <div i18n>Notifications</div>
 
@@ -17,7 +18,15 @@
       ></a>
     </div>
 
-  <my-user-notifications [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"></my-user-notifications>
+    <div *ngIf="!loaded" class="loader">
+      <my-loader [loading]="!loaded"></my-loader>
+    </div>
 
-  <a class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+    <my-user-notifications
+      [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"
+      (notificationsLoaded)="onNotificationLoaded()"
+    ></my-user-notifications>
+
+    <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+  </div>
 </ng-template>

client/src/app/menu/avatar-notification.component.scss

@@ -9,11 +9,27 @@
       padding: 0;
       font-size: 14px;
       font-family: $main-fonts;
-      overflow-y: auto;
+      overflow-y: scroll;
-      max-height: 500px;
       width: 400px;
       box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
 
+      .loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        padding: 5px 0;
+      }
+
+      .content {
+        max-height: 150px;
+        transition: max-height 0.15s ease-out;
+
+        &.loaded {
+          max-height: 500px;
+        }
+      }
+
       .notifications-header {
         display: flex;
         justify-content: space-between;

client/src/app/menu/avatar-notification.component.ts

@@ -17,6 +17,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
   @Input() user: User
 
   unreadNotifications = 0
+  loaded = false
 
   private notificationSub: Subscription
   private routeSub: Subscription
@@ -54,6 +55,14 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     this.popover.close()
   }
 
+  onPopoverHidden () {
+    this.loaded = false
+  }
+
+  onNotificationLoaded () {
+    this.loaded = true
+  }
+
   private async subscribeToNotifications () {
     const obs = await this.userNotificationSocket.getMyNotificationsSocket()
 

client/src/app/shared/misc/loader.component.html

@@ -1,3 +1,8 @@
-<div id="video-loading" *ngIf="loading">
+<div *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
 </div>

client/src/app/shared/misc/loader.component.scss

@@ -0,0 +1,45 @@
+@import '_variables';
+@import '_mixins';
+
+// Thanks to https://loading.io/css/ (CC0 License)
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 50px;
+  height: 50px;
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  margin: 6px;
+  border: 4px solid;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #999999 transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

client/src/app/shared/misc/loader.component.ts

@@ -2,10 +2,9 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ ],
+  styleUrls: [ './loader.component.scss' ],
   templateUrl: './loader.component.html'
 })
-
 export class LoaderComponent {
   @Input() loading: boolean
 }

client/src/app/shared/misc/small-loader.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>

client/src/app/shared/misc/small-loader.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-small-loader',
+  styleUrls: [ ],
+  templateUrl: './small-loader.component.html'
+})
+
+export class SmallLoaderComponent {
+  @Input() loading: boolean
+}

client/src/app/shared/shared.module.ts

@@ -69,6 +69,7 @@ import { InstanceService } from '@app/shared/instance/instance.service'
 import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer'
 import { ConfirmComponent } from '@app/shared/confirm/confirm.component'
 import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
+import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component'
 
 @NgModule({
   imports: [
@@ -90,6 +91,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
 
   declarations: [
     LoaderComponent,
+    SmallLoaderComponent,
     VideoThumbnailComponent,
     VideoMiniatureComponent,
     FeedComponent,
@@ -135,6 +137,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component'
     KeysPipe,
 
     LoaderComponent,
+    SmallLoaderComponent,
     VideoThumbnailComponent,
     VideoMiniatureComponent,
     FeedComponent,

client/src/app/shared/users/user-notifications.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { UserNotificationService } from '@app/shared/users/user-notification.service'
 import { UserNotificationType } from '../../../../../shared'
 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
@@ -15,6 +15,8 @@ export class UserNotificationsComponent implements OnInit {
   @Input() infiniteScroll = true
   @Input() itemsPerPage = 20
 
+  @Output() notificationsLoaded = new EventEmitter()
+
   notifications: UserNotification[] = []
 
   // So we can access it in the template
@@ -43,6 +45,8 @@ export class UserNotificationsComponent implements OnInit {
           result => {
             this.notifications = this.notifications.concat(result.data)
             this.componentPagination.totalItems = result.total
+
+            this.notificationsLoaded.emit()
           },
 
           err => this.notifier.error(err.message)

client/src/app/videos/+video-watch/comment/video-comments.component.html

@@ -54,7 +54,7 @@
           <ng-container i18n>View all {{ comment.totalReplies }} replies</ng-container>
 
           <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span>
-          <my-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-loader>
+          <my-small-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-small-loader>
         </div>
       </div>
     </div>

client/src/app/videos/+video-watch/video-watch.component.html

@@ -146,7 +146,7 @@
           <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
             <ng-container i18n>Show more</ng-container>
             <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-            <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
+            <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
           </div>
 
           <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">