Need to display an modal based on userkey from sessionstorage,but it's too slow

[limpid stirrup]

I'm trying to make a feedback modal, where users answer some rating.
I'm basing my component on wheter user already answered
My problem is, i'm putting my component in the on init of my home page, and asking to render if there's the user data (from session storage) but in the moment the page loads, the user data don't come fast, so it doenst open my modal...
Its there any smater way to do this?

[bright pond]

how is the data loaded?

[limpid stirrup]

in my modal comp
i do

on the homepage

ngOnInit() {
    if (this.userData && this.userData.chave) {
      this.getCampanhaInfoApi(this.userData.chave);
    }

[bright pond]

when is the modal open?

[wintry meteor]

What is the code for this.getCampanhaInfoApi?

[limpid stirrup]

getCampanhaInfoApi(chaveUsuario: string) {
    const hasRefused = this.verifyNPSSessionStorage();
    //if hasrefused exists, means user already refused, so dont need more validation
    //then,dont render the modal
    if (!hasRefused) {
      //if has refused doesnt exists in session storage, then we go to the validation
      this.npsDataService.getNpsValidation(chaveUsuario).subscribe((flag) => {
        this.isNPSvalid = flag;
        if (this.isNPSvalid === true) {
          //if endpoints get true, it renders
          this.openNPSDialog();
        }
      });
    }
  }

[limpid stirrup]

i open here, those codes are in the home page

openNPSDialog() {
    this.dialog.open(NpsDialogComponent, {
      width: '600px',
      autoFocus: false,
    });
  }
}

here i make some kind of validaiton

verifyNPSSessionStorage(): boolean {
    if (this.hasRefused != null) {
      return true;
    } else {
      return false;
    }
  }

[wintry meteor]

```ts
would syntax highlight your code and make it far easier to read. As mother always said: Clean up before company comes over showing your code off on the internet.

[limpid stirrup]

sorry

getCampanhaInfoApi(chaveUsuario: string) {
    const hasRefused = this.verifyNPSSessionStorage();
    //if hasrefused exists, means user already refused, so dont need more validation
    //then,dont render the modal
    if (!hasRefused) {
      //if has refused doesnt exists in session storage, then we go to the validation
      this.npsDataService.getNpsValidation(chaveUsuario).subscribe((flag) => {
        this.isNPSvalid = flag;
        if (this.isNPSvalid === true) {
          //if endpoints get true, it renders
          this.openNPSDialog();
        }
      });
    }
  }

[limpid stirrup]

openNPSDialog() {
    this.dialog.open(NpsDialogComponent, {
      width: '600px',
      autoFocus: false,
    });
  }
}

verifyNPSSessionStorage(): boolean {
    if (this.hasRefused != null) {
      return true;
    } else {
      return false;
    }
  }

[wintry meteor]

.subscribe( is your problem. IMPO.

[limpid stirrup]

the async thing ?

[wintry meteor]

You should be using AsyncPipe I think

[limpid stirrup]

i can only use async pipe in html? is it right? because i'm rendering all in the ts file...

[wintry meteor]

You can just create a little invisible template

@Component({
  template: '<ng-container *ngIf="showDialog$ | async"></ng-container>',
})
export class DataConsentComponent {
  public readonly showDialog$: Observable<boolean>;

  constructor(
    private readonly dialogService: DialogService,
    private readonly npsDataService: NpsDataService,
    private readonly userService: UserService,
  ) {
    this.showDialog$ = this.userService.userData$.pipe(
      first(), // Only do this once... I think this removes the need for your `hasRefused` logic
      switchMap((userData: UserData): Observable<boolean> => this.npsDataService.getNpsValidation(userData.chave)),
      tap((flag: boolean): void => {
        if (flag === true) {
          this.openNPSDialog();
        }
      }),
    );
  }

  public openNPSDialog(): void {
    this.dialog.open(NpsDialogComponent, {
      width: '600px',
      autoFocus: false,
    });
  }
}