feat(manager): show snipper when loading

src/app/pages/manager/fileMode/fileMode.component.ts

@@ -35,7 +35,12 @@ export class FileModeComponent implements OnInit {
 
 	@ViewChild(ListViewComponent) listView: ListViewComponent;
 
+	loading() {
+		this.listView.loading();
+	}
+
 	refresh() {
+		this.loading();
 		this.list$.clearCache();
 		this.listTrigger.next(1);
 	}

src/app/pages/manager/fileMode/listView/listView.component.ts

@@ -99,7 +99,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
 	private listScrb: Subscription;
 
-	resetCurrentPage() {
+	loading() {
+		this.configuration.isLoading = true;
 		this.checkAll = false; // TODO: not work around.
 		this.table.apiEvent({
 			type: API.setPaginationCurrentPage,
@@ -113,7 +114,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
 			const item = $event.value.row;
 			if (item.IsDir) {
 				this.jump.emit({ remote: this.remote, path: item.Path });
-				this.resetCurrentPage();
+				this.loading();
 			}
 		}
 	}
@@ -151,10 +152,16 @@ export class ListViewComponent implements OnInit, OnDestroy {
 	}
 
 	ngOnInit() {
+		this.configuration = { ...DefaultConfig };
+		this.configuration.searchEnabled = true;
+		this.configuration.checkboxes = true;
+		this.configuration.isLoading = true;
+		// ... etc.
 		this.listScrb = this.listExtends$.getOutput().subscribe(listNode => {
+			this.checkAll = false;
+			this.configuration.isLoading = false;
 			if (listNode[1].length !== 0) {
 				this.data = undefined;
-				this.checkAll = false;
 				return;
 			}
 			this.remote = listNode[0].remote;
@@ -163,17 +170,10 @@ export class ListViewComponent implements OnInit, OnDestroy {
 				x.check = false;
 				x.ManipulateIcon = this.manipulate2Icon(x.Manipulation);
 			});
-			this.checkAll = false;
 		});
-
-		this.configuration = { ...DefaultConfig };
-		this.configuration.searchEnabled = true;
-		this.configuration.checkboxes = true;
-		// this.configuration.isLoading = true;
-		// ... etc.
 	}
 	ngOnDestroy() {
 		this.listScrb.unsubscribe();
-		this.resetCurrentPage();
+		this.loading();
 	}
 }

src/app/pages/manager/homeMode/homeMode.component.ts

@@ -8,7 +8,13 @@ import { ConnectionService } from '../../connection.service';
 @Component({
 	selector: 'app-manager-home-mode',
 	template: `
-		<div class="row justify-content-start">
+		<div
+			class="row justify-content-start"
+			[nbSpinner]="isLoading"
+			nbSpinnerSize="giant"
+			nbSpinnerStatus="primary"
+			nbSpinnerMessage="Loading..."
+		>
 			<div class="cloud col-xl-3 col-md-4 col-sm-6" *ngFor="let remote of remotes">
 				<app-home-view-remote
 					[easyMode]="true"
@@ -32,11 +38,17 @@ export class HomeModeComponent implements OnInit {
 	remotesTrigger = new Subject<number>();
 	remotes$: ListRemotesFlow;
 
+	isLoading = true;
+	loading() {
+		this.isLoading = true;
+	}
 	refresh() {
+		this.loading();
 		this.remotes$.clearCache();
 		this.remotesTrigger.next(1);
 	}
 	ngOnInit() {
+		this.loading();
 		const outer = this;
 		this.remotes$ = new (class extends ListRemotesFlow {
 			public prerequest$ = combineLatest([
@@ -47,6 +59,7 @@ export class HomeModeComponent implements OnInit {
 		this.remotes$.deploy();
 		this.remotesTrigger.next(1);
 		this.remotes$.getOutput().subscribe(x => {
+			this.isLoading = false;
 			if (x[1].length !== 0) return;
 			this.remotes = x[0].remotes;
 		});

src/app/pages/manager/manager.component.ts

@@ -146,12 +146,18 @@ export class ManagerComponent implements OnInit, OnDestroy {
 	isMobile = false;
 
 	visable = false;
+
+	loading() {
+		if (this.fileMode) this.file.loading();
+		else if (this.homeMode) this.home.loading();
+	}
 	refresh() {
 		if (this.homeMode) this.home.refresh();
 		else if (this.fileMode) this.file.refresh();
 	}
 
 	addrJump(addr: NavigationFlowOutNode) {
+		this.loading();
 		this.navTrigger.next(addr);
 	}
 

src/app/pages/manager/manager.module.ts

@@ -13,6 +13,7 @@ import {
 	NbLayoutModule,
 	NbProgressBarModule,
 	NbSidebarModule,
+	NbSpinnerModule,
 	NbTabsetModule,
 	NbTooltipModule,
 } from '@nebular/theme';
@@ -59,6 +60,7 @@ import { TasksDialogComponent } from './tasks/tasks.dialog';
 		NbBadgeModule,
 		NbTabsetModule,
 		NbAccordionModule,
+		NbSpinnerModule,
 	],
 })
 export class ManagerModule {}