Change input to disabled while posting

src/app/components/feed/feed.component.html

@@ -14,22 +14,23 @@
           </video>
         </div>
         <mat-form-field id="input">
-          <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue"
+          <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
                     mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
           <button mat-button matSuffix mat-icon-button (click)="name.click()"
             matTooltip="upload a picture or video (up to 10MB)"
-            matTooltipShowDelay="200">
+            matTooltipShowDelay="200"
+            [disabled]="posting">
             <mat-icon>attach_file</mat-icon>
           </button>
           <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
         </mat-form-field>
         <p id="check">
-          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.
+          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
           </mat-checkbox>
         </p>
         <mat-form-field id="action-chooser" *ngIf="checked">
           <mat-label>What did you do?</mat-label>
-          <mat-select [(ngModel)]="activityId" name="action">
+          <mat-select [(ngModel)]="activityId" name="action" [disabled]="posting">
             <mat-option>nothing ;)</mat-option>
             <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description"
                         matTooltipShowDelay="200">
@@ -38,7 +39,8 @@
           </mat-select>
         </mat-form-field>
         <mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error>
-        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button"
+        <mat-progress-bar id="progress-bar" *ngIf="posting" mode="indeterminate"></mat-progress-bar>
+        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" [disabled]="posting"
                 (click)=createPost(content,activityId)>
           POST
         </button>

src/app/components/feed/feed.component.sass

@@ -49,6 +49,8 @@
   text-align: center
   max-height: 512px
   margin-bottom: 1em
+#progress-bar
+  margin-top: 1em
 
 #action-chooser
   width: 100%

src/app/components/feed/feed.component.ts

@@ -22,6 +22,7 @@ export class FeedComponent implements OnInit {
   private file;
   fileType;
   public localFileUrl;
+  posting = false;
 
   checked = false; // if the "I protected the environment."-box is checked
   view = 'new';
@@ -70,7 +71,9 @@ export class FeedComponent implements OnInit {
    */
   createPost(postElement, activityId: string) {
     if (postElement && activityId && this.checked) {
+      this.posting = true;
       this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => {
+        this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
         this.checked = false;
@@ -81,11 +84,14 @@ export class FeedComponent implements OnInit {
           this.showNew();
         }
       }, (error: IErrorResponse) => {
+        this.posting = false;
         this.errorOccurred = true;
         this.errorMessage = error.error.errors[0].message;
       });
     } else if (postElement) {
+      this.posting = true;
       this.feedService.createPost(postElement.value, this.file).subscribe(() => {
+        this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
         this.checked = false;
@@ -96,6 +102,7 @@ export class FeedComponent implements OnInit {
           this.showNew();
         }
       }, (error: IErrorResponse) => {
+        this.posting = false;
         this.errorOccurred = true;
         this.errorMessage = error.error.errors[0].message;
       });
@@ -119,7 +126,7 @@ export class FeedComponent implements OnInit {
   }
 
   /**
-   * Fetches the next posts when scrolled
+   * Fetches the next posts when scrolled down
    */
   onScroll() {
     this.feedService.getNextPosts();