From 6d0110ad7ba46fc115f24a7cc15a71c5ad186ed1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 13 Jan 2021 11:29:55 +0100 Subject: [PATCH] Fix loading bar for HTTP requests --- client/src/app/app.component.ts | 17 ++++++++++++++++- client/src/app/core/core.module.ts | 11 +---------- .../shared/shared-main/shared-main.module.ts | 8 ++++++++ 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 3d1026ac4..ca4b69899 100644 --- a/client/src/app/app.component.ts +++ b/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 () { diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index f51f1920d..c4fc9995e 100644 --- a/client/src/app/core/core.module.ts +++ b/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 diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 74bb4559a..123b5a3e3 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/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,