After a user submits a form, I would like to display their submission by hiding the form area and showing the response in that same area.
Upon submitting the form, my goal is to show a mat-spinner until a response is received from the server.
The component.html code snippet looks as follows:
<div fxFlex [hidden]="!submitted">
<mat-list *ngIf="feedback">
<mat-list-item>
<h4>Your Submission</h4>
<p matLine>Id: {{feedback.id}}</p>
<p matLine>First Name: {{feedback.firstname}}</p>
<p matLine>Last Name: {{feedback.lastname}}</p>
<p matLine>Tel. Number: {{feedback.telnum}}</p>
</mat-list-item>
</mat-list>
<div [hidden]="feedback">
<mat-spinner></mat-spinner><h4>Submitting Form</h4>
</div>
</div>
Below is the corresponding component.ts part:
this.feedbackService.submitFeedback(this.feedback)
.subscribe(
feedback => (this.feedback = feedback,
console.log(feedback))
);
This is the service file:
submitFeedback(feedback: Feedback): Observable<Feedback> {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.post<Feedback>(baseURL + 'feedback/', feedback, httpOptions)
.pipe(catchError(this.processHTTPMsgService.handleError));
}
When I submit the form, it displays the values I used in the form instantly instead of waiting for the response from the server. After 2 seconds (to simulate a delay), the area then updates with the correct values retrieved from the server, which is the desired behavior.
To avoid displaying instant form values and ensure the spinner is visible, I want to implement a 2-second wait time for the server response before updating the view.
I hope this explanation clarifies the question.