Promise Returns but busy stays..

[Codewizard]

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>';

             }
             
         });

     }

 }

}`

[carlfarmer]

@Codewizard did you ever solve this?

[deyvidfk]

Unfortunately I also have the same problem.

Below is the version I currently use:

"angular/animations": "^5.2.0",
"angular/common": "^5.2.0",
"angular/compiler": "^5.2.0",
"angular/core": "^5.2.0",
"angular/forms": "^5.2.0",
"angular/http": "^5.2.0",
"angular/platform-browser": "^5.2.0",
"angular/platform-browser-dynamic": "^5.2.0",
"angular/router": "^5.2.0",
"angular2-busy": "^2.0.4",

[techn1fire]

Any update on this?

I see this issue mostly on mobile.

[parrotsoft]

I have the same case, no logo to have it removed in loading after the Promise returns catch