Places Data from Google API Refresh Late

Hi All,

I am writing an itinerary app to add the points search by google places API. I can get the list of places successfully and list out in console. But the data will be shown on the screen after 5 seconds or more.
Any hints to have the data shown right after the list retrieved from google?

The html code

<ion-content padding>
    <ion-input placeholder="{{ '' | translate }}" [(ngModel)]="googleName" id="name"></ion-input>
    <ion-button slot="end" (click)="textSearch()">
      <ion-icon slot="icon-only" name="search"></ion-icon>
  <ion-card *ngFor="let placesServiceResult of placesServiceResults">
        <ion-label class="ion-text-wrap">{{ }}</ion-label>
        <ion-label class="ion-text-wrap">{{ placesServiceResult.formatted_address }}</ion-label>
          <ion-button slot="start">
            <ion-icon slot="icon-only" name="map"></ion-icon>
          <ion-button slot="end">
            <ion-icon slot="icon-only" name="add"></ion-icon>
  <ion-fab horizontal="end" (click)="scrollToTop()">
    <ion-fab-button size="small"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
  <div #map id="map" style="display: none;"></div>

After input a name and click the search button, the card will be shown after 5 seconds or more

The textSearch function

  async textSearch() {
    console.log('ItinerarySearchPage textSearch');

    const queryRequest = {
      query: this.googleName
    this.placesServiceResults = [];

    this.placesServiceQuery = new google.maps.places.PlacesService(this.googleMap);
    await this.placesServiceQuery.textSearch(queryRequest, async (queryResults, queryStatus) => {
      console.log('ItinerarySearchPage textSearch queryStatus=', queryStatus);
      console.log('ItinerarySearchPage textSearch queryResults=', queryResults);
      if (queryStatus === google.maps.places.PlacesServiceStatus.OK) {
        await queryResults.forEach(element => {
          const placeResult: PlaceResult = {
            formatted_address: null,
            geometry_location_lat: null,
            geometry_location_lng: null,
            icon: null,
            name: null,
            place_id: null
          const formattedAddress = element.formatted_address;
          const geometryLocationLat =;
          const geometryLocationLng = element.geometry.location.lng();
          const icon = element.icon;
          const name =;
          const placeId = element.place_id;

          placeResult.formatted_address = formattedAddress;
          placeResult.geometry_location_lat = geometryLocationLat;
          placeResult.geometry_location_lng = geometryLocationLng;
          placeResult.icon = icon;
 = name;
          placeResult.place_id = placeId;
        await console.log('ItinerarySearchPage textSearch placesServiceResults=', this.placesServiceResults);
      } else {
        if (this.storageLanguage === Language.english) {
        } else {