Angular with @angular/fire Freeze Web App

Question

i have strange situation in my web app, after i complete loading correct data and page rendering after 5 sec my app get stack for 3/3.5 sec, i monitoring performance and see the angulr-fire-database start again and i don't understand why...see my screen...green area rapresent my web app finish loading and rendering and red area start automaticaly...

I hope to expose my problem good, i log my code for better answer

Package.json

"dependencies": {
"@angular/animations": "^10.0.9",
"@angular/common": "^10.0.9",
"@angular/core": "^10.0.9",
"@angular/fire": "^6.0.2",
"@angular/forms": "~10.0.9",
"@angular/platform-browser": "~10.0.9",
"@angular/platform-browser-dynamic": "~10.0.9",
"@angular/platform-server": "^10.0.9",
"@angular/router": "~10.0.9",
"@angular/service-worker": "^10.0.9",
"@fullcalendar/angular": "^5.3.1",
"@fullcalendar/interaction": "^5.3.1",
"@fullcalendar/resource-timeline": "^5.3.1",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.3.1",
"@ionic/angular-server": "^5.4.0-dev.202009102321.26d3971",
"@jermeo/ionic4-datepicker": "^1.0.15",
"@nguniversal/express-engine": "^10.0.2",
"@stripe/stripe-js": "^1.9.0",
"@swimlane/ngx-datatable": "^18.0.0",
"@types/moment": "^2.13.0",
"cordova-android": "^9.0.0",
"cordova-plugin-ionic": "^5.4.6",
"core-js": "^3.6.4",
"express": "^4.17.1",
"firebase": "^7.24.0",
"idb": "^5.0.7",
"moment": "^2.28.0",
"rxjs": "^6.5.5",
"tslib": "^1.10.0",
"uuid": "^8.3.0",
"zone.js": "~0.10.2"

beach.service.ts

import { Injectable } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ToastController } from '@ionic/angular';

import { AngularFireDatabase } from '@angular/fire/database';
import { map } from 'rxjs/operators';

import { BeachSeatModel, 
         PalmsDataModel, BeachGuest, BeachPalmsPriceModel } from '../model/beach.model';
import moment from 'moment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class BeachServiceProvider {

    userLoggedIn: any;

    constructor(private beachFirebaseDB: AngularFireDatabase, private authService: AuthService,
                private http: HttpClient, public toastController: ToastController) {
        this.authService.firebaseUser.subscribe(user => {
            if (user) {
                this.userLoggedIn = user.uid;
            }
        });
    }


    getBookedPalme(selectedDateFrom: number, selectedDateTo: number) {
        return this.beachFirebaseDB.list<BeachSeatModel>('beachBookedPalma/', ref => 
          ref.equalTo('deleted: false')).snapshotChanges().pipe(map(date => {
            return date.map(value => {
                const key = value.payload.key;
                const val = value.payload.val();
                if (selectedDateTo >= +val.dateFrom && selectedDateFrom <= +val.dateTo) {
                    return { key, val };
                }
            });
        }));
    }
}

beach.page.ts

checkBeachSeatAvailability() {
    this.phoneNumberSearchField = null;
    this.guestNameSearchField = null;
    let palmsFilterDataRang: {key: string, val: BeachSeatModel}[] = [];

    this.beachServiceSubscription = this.beachService.getBookedPalmeGlobal().subscribe(async 
      palma => {
      palmsFilterDataRang = [];
      const arrayPalmaLength = palma.length;
      for (let index = 0; index < arrayPalmaLength; index++) {
        const element = palma[index];
        if (element !== undefined && !element.deleted) {
          if (this.selectedDateTo >= element.dateFrom && this.selectedDateFrom <= element.dateTo) {
            palmsFilterDataRang.push({key: element.guestReservationId, val: element});
          }
        }
      }
      let palmeArray = [];
      let palmetteArray = [];
      const palmeWorker = new Worker('../beach.worker', { type: 'module' });
      const palmeRows: any[] = this.palmeRowContainer;
      const palmetteRows: any[] = this.palmetteRowContainer;
      palmeWorker.postMessage(palmsFilterDataRang);
      palmeWorker.onmessage = (result) => {
        palmeArray.push(...result.data.palmeArraySorted);
        palmetteArray.push(...result.data.palmetteArraySorted);
        this.arrayDaPagare.push(...result.data.arrayDaPagare);
        this.arrayVoucher.push(...result.data.arrayVoucher);
        const beachSeatArray = palmeArray.concat(palmetteArray);
        this.searchBeachSeatArray = beachSeatArray;
        this.datatableBeachSeatArray = [...this.searchBeachSeatArray];
        this.setTableCellStatus(palmeArray, palmeRows);
        this.setTableCellStatus(palmetteArray, palmetteRows);
        palmeWorker.terminate();
      };
      // this.beachServiceSubscription.unsubscribe();
      await this.loadBeachSeat.dismiss();
    });
  }

Answer 1

Ok i solve my problem, in my service i change class getBookedPalme() with

getBookedPalme() { return this.beachFirebaseDB.database.ref('beachBookedPalma/'); }