Description
Busy stays and blocks the UI even after the promise returns..
app.module.ts
`import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { TreeModule } from 'primeng/primeng';
import { BusyModule, BusyConfig } from 'angular2-busy';
import { HomeComponent } from './home/home';
import { ProductsComponent } from './products/products';
import { TechnologyComponent } from './technology/technology';
import { LocationComponent } from './locations/locations'
import { routes } from './app.routes'
@NgModule({
declarations: [
HomeComponent,
ProductsComponent,
TechnologyComponent,
LocationComponent
],
imports: [
BrowserModule,
FormsModule,
TreeModule,
RouterModule.forRoot(routes, { useHash:true }),
BusyModule.forRoot(new BusyConfig({
delay: 0,
minDuration: 0,
}))
]
})
export class AppModule { }
locations.tsimport { Component, OnInit } from '@angular/core';
import { CommonModule } from "@angular/common";
import { client } from '../../../shared/utils';
import { Response } from '@angular/http';
import { LocationsResponse, LocationsRequest,LocationDTO } from '../../../dtos';
import { TreeModule, TreeNode } from 'primeng/primeng';
import { BusyModule, BusyDirective } from 'angular2-busy';
@component({
selector: 'locations',
templateUrl: 'locations.html',
styleUrls: ['locations.css']
})
export class LocationComponent implements OnInit {
public locations: TreeNode[] = [];
public nodeCount: number;
busy: Promise;
constructor()
{
}
ngOnInit() {
console.log("Start Init:" + new Date().toLocaleTimeString());
this.busy = this.getLocationsAsyc(null);
this.busy.then(promise => {
console.log("Bound Init:" + new Date().toLocaleTimeString());
this.locations = promise;
this.nodeCount = promise.length;
});
}
async getLocationsAsyc(id) {
console.log("Start getLocationsAsyc:"+ new Date().toLocaleTimeString());
var req = new LocationsRequest();
req.parentID = id;
var r = await client.get(req);
console.log("return getLocationsAsyc:" + new Date().toLocaleTimeString());
return this.locationsToTreeNodes(r.locations);
}
locationsToTreeNodes(rawLocations)
{
console.log("Start locationsToTreeNodes:" + new Date().toLocaleTimeString());
var result = [];
for (var x = 0; x < rawLocations.length; x++)
{
var startLoopTicks = new Date().getTime();
let item = {
"label": rawLocations[x].locationName,
"data": rawLocations[x].locationId,
"leaf": !rawLocations[x].locationHasChildren
}
result.push(item);
}
console.log("return locationsToTreeNodes:" + new Date().toLocaleTimeString());
return result;
}
loadNode(event)
{
console.log("Start loadNode:" + new Date().toLocaleTimeString());
if (event.node)
{
this.busy = this.getLocationsAsyc(event.node.data);
this.busy.then(p => {
event.node.children = p;
console.log("Bind loadNode:" + new Date().toLocaleTimeString());
});
}
}
loadLI(event)
{
console.dir(event);
if (event)
{
var target = event.target || event.srcElement || event.currentTarget;
this.busy = this.getLocationsAsyc(target.attributes.id.value)
this.busy.then(p => {
var newList = "<ul>";
if (p.length > 0)
{
for (var x = 0; x < p.length; x++)
{
console.log("Child node of " + target.attributes.id.value + ":" + p[x].label);
newList = newList + '<li ng-click="loadLI($event)" id="'+ p[x].data +'">' + p[x].label + "</li>";
}
target.innerHTML = target.innerHTML + newList + '</ul>';
}
});
}
}
}`