Add loading animation to post media

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

@@ -92,7 +92,6 @@ export class FeedComponent implements OnInit {
     } else if (postElement) {
       this.posting = true;
       this.feedService.createPost(postElement.value, this.file).subscribe((result) => {
-        console.log('response in component');
         this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
@@ -104,7 +103,6 @@ export class FeedComponent implements OnInit {
           this.showNew();
         }
       }, (error: IErrorResponse) => {
-        console.log('an error occured in component');
         console.log(error);
         this.posting = false;
         this.errorOccurred = true;

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

@@ -22,9 +22,10 @@
     </mat-card-subtitle>
   </mat-card-header>
   <mat-card-content>
-    <div class="postMedia">
+    <mat-spinner *ngIf="post.mediaLoading" style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
-      <img *ngIf="post.mediaType === 'IMAGE'" [src]="post.mediaUrl"  alt="post image"/>
+    <div class="postMedia" [hidden]="post.mediaLoading">
-      <video *ngIf="post.mediaType === 'VIDEO'" controls>
+      <img *ngIf="post.mediaType === 'IMAGE'" [src]="post.mediaUrl" (load)="onLoad(this.post)" alt="post image"/>
+      <video *ngIf="post.mediaType === 'VIDEO'" (load)="onLoad(this.post)" controls>
         <source [src]="post.mediaUrl" type="video/webm">
       </video>
     </div>

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

@@ -49,6 +49,11 @@ export class PostlistComponent implements OnInit {
     });
   }
 
+  onLoad(post: Post) {
+    console.log('loaded' + post.content);
+    post.mediaLoading = false;
+  }
+
   public showUserProfile(post: any) {
     this.router.navigate(['profile/' + post.author.id]);
   }

src/app/models/post.ts

@@ -13,6 +13,7 @@ export class Post {
   deletable: boolean;
   author: Author;
   activity: Activity;
+  mediaLoading: boolean;
   mediaUrl: string;
   mediaType: 'VIDEO' | 'IMAGE';
 
@@ -42,6 +43,7 @@ export class Post {
     if (media) {
       this.mediaUrl = environment.greenvironmentUrl + media.url;
       this.mediaType = media.type;
+      this.mediaLoading = true;
     }
   }
 }

src/app/services/feed/feed.service.ts

@@ -209,7 +209,7 @@ export class FeedService extends BaseService {
         const updatedPosts = this.posts.getValue();
         if (this.activePostList === Sort.NEW) {
           const post = this.constructPost(response);
-            updatedPosts.unshift(post);
+          updatedPosts.unshift(post);
           this.posts.next(updatedPosts);
         }
       }));