improve column rendering performance (#742)

* improve column rendering performance

* disable ACA-1892 implementation

* fix sidenav auto-close
This commit is contained in:
Denys Vuika
2018-10-20 09:44:22 +01:00
committed by GitHub
parent ed6d95cc1a
commit f1813d2082
8 changed files with 12 additions and 8 deletions

View File

@@ -35,7 +35,7 @@
</empty-folder-content> </empty-folder-content>
<data-columns> <data-columns>
<ng-container *ngFor="let column of columns"> <ng-container *ngFor="let column of columns; trackBy: trackById">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column

View File

@@ -38,7 +38,7 @@
(name-click)="navigateTo($event.detail?.node)"> (name-click)="navigateTo($event.detail?.node)">
<data-columns> <data-columns>
<ng-container *ngFor="let column of columns"> <ng-container *ngFor="let column of columns; trackBy: trackById">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column

View File

@@ -42,7 +42,7 @@ import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
import { NodePermissionService } from '../../services/node-permission.service'; import { NodePermissionService } from '../../services/node-permission.service';
import { currentFolder } from '../../store/selectors/app.selectors'; import { currentFolder } from '../../store/selectors/app.selectors';
import { AppStore } from '../../store/states'; import { AppStore } from '../../store/states';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { BreakpointObserver } from '@angular/cdk/layout';
@Component({ @Component({
selector: 'app-layout', selector: 'app-layout',
@@ -173,7 +173,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
private isSmallScreen(): Observable<boolean> { private isSmallScreen(): Observable<boolean> {
return this.breakpointObserver return this.breakpointObserver
.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape]) .observe(['(max-width: 600px)'])
.pipe(map(result => result.matches)); .pipe(map(result => result.matches));
} }
} }

View File

@@ -37,7 +37,7 @@
</empty-folder-content> </empty-folder-content>
<data-columns> <data-columns>
<ng-container *ngFor="let column of columns"> <ng-container *ngFor="let column of columns; trackBy: trackById">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column

View File

@@ -143,4 +143,8 @@ export abstract class PageComponent implements OnInit, OnDestroy {
trackByActionId(index: number, action: ContentActionRef) { trackByActionId(index: number, action: ContentActionRef) {
return action.id; return action.id;
} }
trackById(index: number, obj: { id: string }) {
return obj.id;
}
} }

View File

@@ -37,7 +37,7 @@
</empty-folder-content> </empty-folder-content>
<data-columns> <data-columns>
<ng-container *ngFor="let column of columns"> <ng-container *ngFor="let column of columns; trackBy: trackById">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column

View File

@@ -35,7 +35,7 @@
</empty-folder-content> </empty-folder-content>
<data-columns> <data-columns>
<ng-container *ngFor="let column of columns"> <ng-container *ngFor="let column of columns; trackBy: trackById">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column

View File

@@ -35,7 +35,7 @@
</empty-folder-content> </empty-folder-content>
<data-columns> <data-columns>
<ng-container *ngFor="let column of columns"> <ng-container *ngFor="let column of columns; trackBy: trackById">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column