Lazy load notifications dropdown

client/src/app/header/notification-dropdown.component.html

@@ -24,7 +24,7 @@
 } @else {
   <div
     ngbDropdown autoClose="outside" placement="bottom" container="body" dropdownClass="dropdown-notifications"
-    #dropdown="ngbDropdown" (shown)="onDropdownShown()" (hidden)="onDropdownHidden()"
+    #dropdown="ngbDropdown" (openChange)="$event === true ? onDropdownShown() : onDropdownHidden()"
   >
     <button
       i18n-title title="View your notifications" class="peertube-button tertiary-button rounded-icon-button disable-dropdown-caret notification-inbox-dropdown"
@@ -60,17 +60,19 @@
           </div>
         </div>
 
+        @defer (when opened) {
           <div *ngIf="!loaded" class="loader mt-4">
+            <my-loader size="xl" [loading]="loaded"></my-loader>
           </div>
 
-        @defer (when loaded) {
           <my-user-notifications
             [ignoreLoadingBar]="true" [infiniteScroll]="false" [itemsPerPage]="10"
             [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
           ></my-user-notifications>
         } @placeholder {
-          <my-loader size="xl" [loading]="loaded"></my-loader>
-
+          <div class="loader mt-4">
+            <my-loader size="xl" loading="true"></my-loader>
+          </div>
         }
 
         <div class="all-notifications">

client/src/app/header/notification-dropdown.component.ts

@@ -83,7 +83,6 @@ export class NotificationDropdownComponent implements OnInit, OnDestroy {
   }
 
   onDropdownHidden () {
-    this.loaded = false
     this.opened = false
   }
 

client/src/app/shared/shared-main/common/loader.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { booleanAttribute, Component, Input } from '@angular/core'
 import { NgIf, NgStyle } from '@angular/common'
 
 @Component({
@@ -8,7 +8,7 @@ import { NgIf, NgStyle } from '@angular/common'
   imports: [ NgIf, NgStyle ]
 })
 export class LoaderComponent {
-  @Input() loading: boolean
+  @Input({ transform: booleanAttribute }) loading: boolean
   @Input() size: 'sm' | 'xl'
 
   private readonly sizes = {

client/src/app/shared/shared-main/menu/horizontal-menu.component.ts

@@ -90,7 +90,7 @@ export class HorizontalMenuComponent implements OnInit, OnChanges, OnDestroy {
     })
 
     if (!entry) {
-      if (this.menuEntries.length !== 0) {
+      if (this.menuEntries.length !== 0 && currentUrl !== '/') {
         logger.info(`Unable to find entry for ${currentUrl} or ${currentComponentPath}`, { menuEntries: this.menuEntries })
       }
 

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

@@ -38,8 +38,6 @@ export class UserNotificationsComponent implements OnInit {
   ) { }
 
   ngOnInit () {
-    console.log('loaded')
-
     this.componentPagination = {
       currentPage: 1,
       itemsPerPage: this.itemsPerPage, // Reset items per page, because of the @Input() variable