Show 'In Progress' status on button

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/annotation-input.component.html

@@ -2,6 +2,7 @@
 @let appMode = appMode$ | async;
 @let userProblem = isUserProblem$ | async;
 @let editingOrAdding = appMode === 'edit' || appMode === 'add';
+@let inProgress = inProgress$ | async;
 @if (problem) {
 <div class="card">
     <div class="card-body">
@@ -13,12 +14,21 @@
             <la-knowledge-base-form [form]="form" />
         </div>
         <div class="d-flex justify-content-between mt-3">
+            @if (!inProgress) {
             <la-icon-button
                 buttonStyle="success"
                 [icon]="faTree"
                 label="Parse and prove"
                 (click)="startParse()"
             />
+            } @else {
+            <la-icon-button
+                buttonStyle="success"
+                [icon]="faHourglass"
+                label="Parsing and proving..."
+                disabled="true"
+            />
+            }
             @if (appMode === 'browse' && (canCopyProblem$ | async)) {
             <a
                 class="btn btn-secondary d-flex align-items-center justify-content-center"

frontend/src/app/annotate/annotation-input/annotation-input.component.ts

@@ -12,7 +12,7 @@ import { PremisesFormComponent } from "./premises-form/premises-form.component";
 import { KnowledgeBaseFormComponent } from "./knowledge-base-form/knowledge-base-form.component";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Dataset, KnowledgeBaseAnnotation, KnowledgeBaseRelationship, Problem } from "../../types";
-import { faCheck, faCopy, faExclamationCircle, faFloppyDisk, faTrash, faTree, faWrench } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faExclamationCircle, faFloppyDisk, faHourglass, faTrash, faTree, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { ProblemDetailsComponent } from "./problem-details/problem-details.component";
 import { map, Subject } from "rxjs";
 import { ActivatedRoute, Router, RouterLinkWithHref } from "@angular/router";
@@ -73,13 +73,16 @@ export class AnnotationInputComponent implements OnInit {
 
     public submit$ = new Subject<void>();
 
+    public inProgress$ = this.parseService.inProgress$;
+
     public faCopy = faCopy;
     public faCheck = faCheck;
     public faTree = faTree;
     public faFloppyDisk = faFloppyDisk;
     public faExclamationCircle = faExclamationCircle;
     public faTrash = faTrash;
     public faWrench = faWrench;
+    public faHourglass = faHourglass;
 
     public appMode$ = this.problemService.appMode$;
     public isUserProblem$ = this.problem$.pipe(

frontend/src/app/services/parse.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Subject, switchMap, catchError, of, merge, map, share } from 'rxjs';
+import { Subject, switchMap, catchError, of, merge, map, share, startWith } from 'rxjs';
 import { ParseInput } from '@/annotate/annotation-input/annotation-input.component';
 import { ProblemService } from './problem.service';
 import {
@@ -44,6 +44,12 @@ export class ParseService {
         share()
     );
 
+    public inProgress$ = merge(
+        this.submit$.pipe(map(() => true)),
+        this.parseResults$.pipe(map(() => false)),
+        this.clearOnNewProblem$.pipe(map(() => false)),
+    ).pipe(startWith(false));
+
     public parse$ = merge(
         this.parseResults$,
         this.clearOnNewProblem$