Vastly improved Language Editor loading time (virtual scrolling)

dmp-frontend/src/app/ui/language-editor/language-editor.component.html

@@ -1,10 +1,11 @@
-<div *ngIf="parseFinished" class="language-editor">
+<div *ngIf="parseFinished" class="language-editor"  [style.height]="(keys.length * rowHeight) + 'px'">
 	<form (ngSubmit)="updateLang()" [formGroup]="formGroup">
 		<div class="row">
-			<mat-card class="col-md-8 offset-md-2">
+			<mat-card class="col-md-8 offset-md-2 sticky">
 				<mat-card-title><div [innerHTML]="currentLang"></div></mat-card-title>
 				<mat-card-content>
-					<div *ngFor="let key of keys">
+					<div>
+					<div *ngFor="let key of visibleKeys">
 						<mat-form-field >
 							<mat-label>{{key}} :</mat-label>
 							<textarea matInput class="language-area"
@@ -15,6 +16,7 @@
 										cdkAutosizeMaxRows="5"></textarea>
 						</mat-form-field >
 					</div>
+				</div>
 				</mat-card-content>
 			</mat-card>
 			<button mat-fab class="mat-fab-bottom-right save-btn" type="submit">

dmp-frontend/src/app/ui/language-editor/language-editor.component.scss

@@ -14,4 +14,11 @@
 		position: fixed;
 		right: 10px;
 	}
+
+	.sticky {
+		position: fixed;
+		left: 200px;
+		right: 150px;
+		width: 50%;
+	}
 }

dmp-frontend/src/app/ui/language-editor/language-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { LanguageService } from '@app/core/services/language/language.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
@@ -12,8 +12,14 @@ import { Router } from '@angular/router';
   templateUrl: './language-editor.component.html',
   styleUrls: ['./language-editor.component.scss']
 })
-export class LanguageEditorComponent extends BaseComponent implements OnInit {
+export class LanguageEditorComponent extends BaseComponent implements OnInit, OnDestroy {
+	readonly rowHeight = 100;
+	readonly maxElements = 12;
+
 	keys = [];
+	visibleKeys = [];
+	startIndex = 0;
+	endIndex: number;
 	parseFinished = false;
 	currentLang: string;
 	formGroup: FormGroup;
@@ -29,6 +35,8 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit {
   ngOnInit() {
 	  this.formBuilder = new FormBuilder();
 	  this.formGroup = this.formBuilder.group({});
+	  this.endIndex = this.maxElements;
+	  window.addEventListener('scroll', this.refreshFn, true);
 	  this.language.getCurrentLanguageJSON()
 	  .pipe(takeUntil(this._destroyed))
 	  .subscribe(response => {
@@ -38,12 +46,17 @@ export class LanguageEditorComponent extends BaseComponent implements OnInit {
 	  });
   }
 
+  ngOnDestroy() {
+	window.removeEventListener('scroll', this.refreshFn, true);
+  }
+
   convertBlobToJSON(blob: Blob) {
 	const fr = new FileReader();
 	fr.onload = ev => {
 		const langObj = JSON.parse(fr.result as string);
 		this.convertObjectToForm(langObj, '', this.formGroup);
 		this.currentLang = this.language.getCurrentLanguageName();
+		this.visibleKeys = this.keys.slice(this.startIndex, this.endIndex);
 		this.parseFinished = true;
 	};
 	fr.readAsText(blob);
@@ -88,4 +101,15 @@ onCallbackError(error: any) {
 	//this.validateAllFormFields(this.formGroup);
 }
 
+refreshFn = (ev: Event) => {
+
+	this.startIndex = Math.floor((ev.srcElement as HTMLDocument).scrollingElement.scrollTop / this.rowHeight);
+	this.endIndex = this.startIndex + this.maxElements;
+	const tempKeys = this.keys.slice(this.startIndex, this.endIndex);
+	this.visibleKeys.length = 0;
+	for (const key of tempKeys) {
+		this.visibleKeys.push(key);
+	}
+}
+
 }