So I just found a weird Behavior of Async Pipe with any Subject of RXJS

[solar dune]

selectAvatarImage(files: Event): void {
    const file = (files.target as HTMLInputElement).files!.item(0);

    const formData = new FormData();
    formData.append('profile_image', file!, file?.name);

    this.changeAvatarImageSubscription = this.ionicService.obsShowLoading(`Proses mengganti Foto Profile Anda`)
    .pipe(
      switchMap(() => {
        return this.authRepository.user$.pipe(
          switchMap(user => {
            if(user.profile_photo_path == 'default.png') {
              return this.authService.uploadProfileImage(formData).pipe(
                switchMap(image => {
                  return this.authService.updateProfile(user.id, {
                    name: user.name,
                    email: user.email,
                    photo: image
                  }).pipe(
                    switchMap(updatedUser => {
                      // this.authRepository.updateUserState(updatedUser);

                      return this.ionicService.obsDismissLoading().pipe(
                        switchMap(() => this.ionicService.obsPrimaryToast(`Foto profile anda berhasil diperbaharui.`))
                      )
                    })
                  )
                })
              )
            } else {
 .....
shareReplay(1),
suscribe();
  }

template.html

  <div class="profile-container" *ngIf="user$ | async as user; else loading">
    <div class="top-container"></div>
    <div class="center-container">
      <div class="user-info-container">
        <ion-avatar class="profile-image">
          <img [lazyLoad]="userImageUrl + user?.profile_photo_path"
          [defaultImage]="'./assets/eclipse-circle.gif'">
          <div class="camera-icon" (click)="file.click()">
            <ion-icon name="camera-sharp"></ion-icon>
          </div>
          <input type="file" #file hidden accept="image/*" (change)="selectAvatarImage($event)" />
        </ion-avatar>
        <div class="name-text ion-margin-top">
          {{ user?.name }}
        </div>
      </div>