0

Something has gone south in my code.

i have basically commented everything out of my component so that i looks like this now:

 <div  *ngFor="let restaurant of restaurants">
        {{restaurant.updated}}
    </div>

And after my http call to my api (which takes about 500ms) i do this:

this.restaurants = results;

Then it takes about 10+ seconds for it to rerender. I have a lot of warning in my console but i haven't managed to figure out why those are there.

enter image description here

as far as i know i dont have any "mousewheel" events in my app. And how can i figure out what "load" that took 3 seconds? And are these warnings acctually something that concerns my problem? Also the first time i do

this.restaurants = results;

It acts like it usually do and renders straight away.

Profiler result:

enter image description here

So after commenting everything out and taking one method at a time back i realizes this was the problem:

 autocomplete.addListener("place_changed", () => {
                    const place = autocomplete.getPlace();
                    let foundCity = place.address_components.filter((address:any) => { if(address.types.some((type:any) => type == 'postal_town')){ return address} })[0].long_name;
                    if(foundCity){
                        this.userCity = foundCity;
                        
                        let location = place.geometry.location;
                        this.userLongitude = location.lng();
                        this.userLatitude = location.lat();
                   This row inside of the event   -->  this.getRestaurants();
                    }
                }, { passive: true });

It seems like when calling the getRestaurants() method which gets the restaurants from the db and then does:

this.restaurants = results;

Somehow blocks it from rendering.

When I do this:

   <button type="button" class="btn btn-primary" (click)="getRestaurants()">Click</button>

It renders straight away. So how can i call getRestaurants() method after the place_changed event has happend?

Daniel Gustafsson
  • 1,725
  • 7
  • 37
  • 78
  • no of records in resultset? – Gourav Garg Dec 01 '20 at 13:29
  • If you are using chrome you could try to run the profiler to see what is taking so long. – R. de Ruijter Dec 01 '20 at 13:30
  • This might help https://stackoverflow.com/questions/37721782/what-are-passive-event-listeners – Anusha kurra Dec 01 '20 at 13:32
  • 1
    There's nothing in your code that could lead to believe that you have a performance problem. As for the warnings, they're pretty straightforward in what they say, however those can be false positives and/or consequential errors from other issues. –  Dec 01 '20 at 13:35
  • @GouravGarg I seems like it doesn't matter. I can hardcode 1 object in the array and it will still be as slow. – Daniel Gustafsson Dec 01 '20 at 13:37
  • @R.deRuijter i added profiler result. I haven't used that a lot so it doesn't say that much to me. – Daniel Gustafsson Dec 01 '20 at 13:47
  • @DanielGustafsson The profiler result looks normal. If you deploy the angular application is it as slow as it locally? – R. de Ruijter Dec 01 '20 at 13:56
  • @R.deRuijter yes it's the same when deployed to using google cloud run – Daniel Gustafsson Dec 01 '20 at 14:00
  • @DanielGustafsson Uhmm strange. You could have a look into trying to change the ChangeDetectionStrategy to OnPush ([guide here](https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4)) to see if this improves the rendering speed. Otherwise, you can also have a look at [this](https://blog.bitsrc.io/top-reasons-why-your-angular-app-is-slow-c36780a0a289) guide to see if it has any improvements that you can use – R. de Ruijter Dec 01 '20 at 14:07
  • @R.deRuijter I made an edit. But i don't know why that happens! – Daniel Gustafsson Dec 01 '20 at 14:22
  • Ok ok, Could it be that `place_changed` event is fired many times? If this is the case could you reduce the amount of times this event is called? – R. de Ruijter Dec 01 '20 at 14:33
  • @R.deRuijter it seems like it's only called once :( – Daniel Gustafsson Dec 01 '20 at 14:37

0 Answers0