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.ts import { 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