title: Angular Message Gets Triggered Before Service Call is Done
body: <p>In my app, I have a button that enables users to calculate some data when it's clicked. To do the calculation, a service from the back-end is called. After the service finishes the calculation, I display a message that says 'Done'. But the message appears way before the service finishes calculation. Here's my code, how can I fix this?</p>
  <pre><code> sendCalculateMaterialPlanDetail() {
  
      this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
        disableClose: false,
      });
  
      this.confirmDialogRef.componentInstance.confirmMessage =
        &quot;Will start to calculate.&quot;;
  
      this.confirmDialogRef.afterClosed().subscribe((result) =&gt; {
        if (result) {
          this._productionService
            .sendCalculateMaterialPlanDetail(this.materialPlan)
            .subscribe((response: IMaterialPlan) =&gt; {
              this.materialPlan = response;
            });
        }
        this._messages.Show(
          &quot;DONE&quot;,
          &quot;DONE&quot;,
          3
        );
      });
    }
  </code></pre>