Fix loading bar for HTTP requests

client/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { filter, first, map, pairwise } from 'rxjs/operators'
 import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
 import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
-import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
+import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
 import { AuthService, MarkdownService, RedirectService, ScreenService, ServerService, ThemeService, User } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PluginService } from '@app/core/plugins/plugin.service'
@@ -12,6 +12,7 @@ import { CustomModalComponent } from '@app/modal/custom-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
 import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { LoadingBarService } from '@ngx-loading-bar/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
 import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
@@ -55,6 +56,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private modalService: NgbModal,
     private markdownService: MarkdownService,
     private ngbConfig: NgbConfig,
+    private loadingBar: LoadingBarService,
     public menu: MenuService
   ) {
     this.ngbConfig.animation = false
@@ -126,6 +128,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
 
+    // Handle anchors/restore position
     scrollEvent.subscribe(e => {
       // scrollToAnchor first to preserve anchor position when using history navigation
       if (e.anchor) {
@@ -178,19 +181,31 @@ export class AppComponent implements OnInit, AfterViewInit {
                         }
                       })
 
+    // Homepage redirection
     navigationEndEvent.pipe(
       map(() => window.location.pathname),
       filter(pathname => !pathname || pathname === '/' || is18nPath(pathname))
     ).subscribe(() => this.redirectService.redirectToHomepage(true))
 
+    // Plugin hooks
     navigationEndEvent.subscribe(e => {
       this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url })
     })
 
+    // Automatically hide/display the menu
     eventsObs.pipe(
       filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
       filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen())
     ).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page
+
+    // Handle lazy loaded module
+    eventsObs.pipe(
+      filter((e: Event): e is RouteConfigLoadStart => e instanceof RouteConfigLoadStart)
+    ).subscribe(() => this.loadingBar.useRef().start())
+
+    eventsObs.pipe(
+      filter((e: Event): e is RouteConfigLoadEnd => e instanceof RouteConfigLoadEnd)
+    ).subscribe(() => this.loadingBar.useRef().complete())
   }
 
   private injectBroadcastMessage () {

client/src/app/core/core.module.ts

@@ -8,11 +8,7 @@ import { PeerTubeSocket } from '@app/core/notification/peertube-socket.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
-import { LoadingBarModule } from '@ngx-loading-bar/core'
-import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
-import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
 import { AuthService } from './auth'
-import { ScopedTokensService } from './scoped-tokens'
 import { ConfirmService } from './confirm'
 import { CheatSheetComponent } from './hotkeys'
 import { MenuService } from './menu'
@@ -23,6 +19,7 @@ import { RestExtractor, RestService } from './rest'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
 import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
 import { ServerConfigResolver } from './routing/server-config-resolver.service'
+import { ScopedTokensService } from './scoped-tokens'
 import { ServerService } from './server'
 import { ThemeService } from './theme'
 import { UserService } from './users'
@@ -33,9 +30,6 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
     CommonModule,
     BrowserAnimationsModule,
 
-    LoadingBarHttpClientModule,
-    LoadingBarRouterModule,
-    LoadingBarModule,
     ToastModule,
 
     HotkeyModule.forRoot({
@@ -48,9 +42,6 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
   ],
 
   exports: [
-    LoadingBarHttpClientModule,
-    LoadingBarModule,
-
     ToastModule,
 
     CheatSheetComponent

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

@@ -13,6 +13,8 @@ import {
   NgbPopoverModule,
   NgbTooltipModule
 } from '@ng-bootstrap/ng-bootstrap'
+import { LoadingBarModule } from '@ngx-loading-bar/core'
+import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
 import {
@@ -42,6 +44,9 @@ import { VideoChannelService } from './video-channel'
     RouterModule,
     HttpClientModule,
 
+    LoadingBarHttpClientModule,
+    LoadingBarModule,
+
     NgbDropdownModule,
     NgbModalModule,
     NgbPopoverModule,
@@ -95,6 +100,9 @@ import { VideoChannelService } from './video-channel'
     RouterModule,
     HttpClientModule,
 
+    LoadingBarHttpClientModule,
+    LoadingBarModule,
+
     NgbDropdownModule,
     NgbModalModule,
     NgbPopoverModule,