added progress spinner to feed and search

src/app/app.module.ts

@@ -46,6 +46,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatRippleModule} from '@angular/material/core';
 import {MatBadgeModule} from '@angular/material/badge';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
@@ -124,7 +125,8 @@ const appRoutes: Routes = [
     MatRippleModule,
     MatTableModule,
     MatSortModule,
-    MatBadgeModule
+    MatBadgeModule,
+    MatProgressSpinnerModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,8 +1,3 @@
-<!--<div id="postinput">
-  <textarea #content id='input' placeholder="Post something ..." rows='3' wrap="soft"></textarea>
-  <button id="attach" type='submit'><span><i class="fa fa-paperclip fa-2x" aria-hidden="true"></i></span></button>
-  <button id="submit" type='submit' (click)=createPost(content)><span><i class="fa fa-send-o fa-2x" aria-hidden="true"></i></span></button>
-</div>-->
 <div id="home">
 <mat-card >      
   <mat-card-content>
@@ -36,10 +31,6 @@
   </mat-button-toggle-group>
 </div>
 <div id="complete-feed">
-  <!--<div id='feedchooser'>
-    <button id="new" (click)="showNew()">New</button>
-    <button id='mostliked' (click)="showMostLiked()">Most Liked</button>
-  </div>-->
   <div id="feedlist">
     <div *ngIf = "viewNew">
       <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
@@ -47,6 +38,7 @@
     <div *ngIf = "viewMostLiked">
       <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
     </div>
+    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
   </div>
 </div>
 </div>

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

@@ -11,6 +11,7 @@ import { User } from 'src/app/models/user';
   styleUrls: ['./feed.component.sass']
 })
 export class FeedComponent implements OnInit {
+  loading = true;
   checked: boolean; // if the "I protected the environment."-box is checked
   empty: boolean;
  // points value of the green action
@@ -38,6 +39,7 @@ export class FeedComponent implements OnInit {
       if (this.loggedIn) {
         this.userId = user.userID;
         this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => {
+          this.loading = false;
           this.feedNew = this.feedService.renderAllPosts(response.json());
           this.parentSelectedPostList = this.feedNew;
           this.feedMostLiked = this.feedNew;
@@ -45,6 +47,7 @@ export class FeedComponent implements OnInit {
         });
       } else {
         this.feedService.getAllPostsRaw().subscribe(response => {
+          this.loading = false;
           this.feedNew = this.feedService.renderAllPosts(response.json());
           this.parentSelectedPostList = this.feedNew;
           this.feedMostLiked = this.feedNew;

src/app/components/search/search.component.html

@@ -36,5 +36,7 @@
             </div>
           </mat-card-header>
         </mat-card>
+        <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
+        
     </div>
 </div>

src/app/components/search/search.component.sass

@@ -37,4 +37,4 @@
 
 .icon-box
   text-align: right
-  width: 100%
+  width: 100%

src/app/components/search/search.component.ts

@@ -13,6 +13,7 @@ import { DatasharingService } from '../../services/datasharing.service';
   styleUrls: ['./search.component.sass']
 })
 export class SearchComponent implements OnInit {
+  loading = false;
   searchValue = ' ';
   category = 'user';
   user: User;
@@ -40,6 +41,7 @@ export class SearchComponent implements OnInit {
     this.searchValue = searchWord;
     if (searchWord) { // if not null or empty
       if (this.category === 'user') {
+        this.loading = true;
         this.findUser(searchWord);
       } else if (this.category === 'groupe') {
         // this.findUserByHandle(searchWord);
@@ -74,6 +76,7 @@ export class SearchComponent implements OnInit {
             }
           }
         }
+        this.loading = false;
       });
   }