feat: add a loader gif on news loadding

src/app/post/components/post-list/post-list.component.html

 <div *ngIf="!isPublishMode" class="section-container" fxLayout="row" fxLayoutGap="32px">
-  <div fxLayout="column" class="list-container" fxLayoutGap="16px">
+  <div *ngIf="isLoading" class="loader">
+    <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+  </div>
+  <div *ngIf="!isLoading" fxLayout="column" class="list-container" fxLayoutGap="16px">
     <div fxLayout="column" *ngIf="displayTags()">
       <div fxLayout="row wrap" fxLayoutAlign="none center" fxLayoutGap="8px">
         <div
@@ -76,7 +79,7 @@
       </div>
     </div>
   </div>
-  <div fxLayout="column" fxLayoutAlign=" center" class="project-container desktop">
+  <div *ngIf="!isLoading" fxLayout="column" fxLayoutAlign=" center" class="project-container desktop">
     <div class="background-project-container">
       <div class="project-content" fxLayout="column">
         <app-svg-icon [iconClass]="'icon-80'" [iconColor]="'inherit'" [type]="'post'" [icon]="'appels'"></app-svg-icon>

src/app/post/components/post-list/post-list.component.scss

@@ -3,6 +3,15 @@
 @import '../../../../assets/scss/shapes';
 @import '../../../../assets/scss/breakpoint';
 
+.loader {
+  width: 100%;
+  text-align: center;
+  .loader-gif {
+    min-width: 10%;
+    min-height: 10%;
+  }
+}
+
 .section-container {
   background: $grey-6;
   min-height: 68vh;