Fix post loading animation in feed

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

@@ -49,7 +49,10 @@ infinite-scroll
 <div id="complete-feed">
   <div id="feedlist">
     <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
-    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 3em;" diameter="50"></mat-spinner>
+    <div style="height: 60px;" [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostLiked") '>
+      <!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>-->
+        <mat-spinner style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
+    </div>
   </div>
 </div>
 </div>

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

@@ -12,7 +12,8 @@ import { User } from 'src/app/models/user';
   styleUrls: ['./feed.component.sass']
 })
 export class FeedComponent implements OnInit {
-  loading = true;
+  loadingNew = true;
+  loadingMostLiked = true;
 
   checked = false; // if the "I protected the environment."-box is checked
   view = 'new';
@@ -48,6 +49,13 @@ export class FeedComponent implements OnInit {
       }
       this.parentSelectedPostList = response;
     });
+    this.feedService.newPostsAvailable.subscribe(response => {
+      this.loadingNew = response;
+    });
+    this.feedService.topPostsAvailable.subscribe(response => {
+      console.log(response);
+      this.loadingMostLiked = response;
+    });
   }
 
   createPost(pElement, activityId: string) {
@@ -74,6 +82,7 @@ export class FeedComponent implements OnInit {
   }
 
   showMostLiked() {
+    this.view = 'mostLiked';
     this.feedService.getPosts('TOP');
   }
 }

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

@@ -12,6 +12,8 @@ import { User } from 'src/app/models/user';
 })
 export class FeedService {
 
+  public newPostsAvailable = new BehaviorSubject<boolean>(true);
+  public topPostsAvailable = new BehaviorSubject<boolean>(true);
   public posts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
   public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
   public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
@@ -153,7 +155,7 @@ export class FeedService {
   }
 
   public getNextPosts() {
-    if (this.activePostList === 'NEW') {
+    if (this.activePostList === 'NEW' && this.newPostsAvailable) {
       this.newOffset += 10;
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
@@ -161,10 +163,13 @@ export class FeedService {
       .subscribe(response => {
         let updatedposts = this.newPosts.getValue();
         updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
+        if (this.renderAllPosts(response.json()).length < 1) {
+          this.newPostsAvailable.next(false);
+        }
         this.newPosts.next(updatedposts);
         this.setPost('NEW');
       });
-    } else if (this.activePostList === 'TOP') {
+    } else if (this.activePostList === 'TOP' && this.topPostsAvailable) {
       this.mostLikedOffset += 10;
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
@@ -172,6 +177,9 @@ export class FeedService {
       .subscribe(response => {
         let updatedposts = this.mostLikedPosts.getValue();
         updatedposts = updatedposts.concat(this.renderAllPosts(response.json()));
+        if (this.renderAllPosts(response.json()).length < 1) {
+          this.topPostsAvailable.next(false);
+        }
         this.mostLikedPosts.next(updatedposts);
         this.setPost('TOP');
       });