add skeleton for projects module

src/app/projects/pages/participants-list/participants-list.component.html

-<section *ngIf="participants" class="row">
-  <!-- <add-participant-modal
-    [projectId]="projectId"
-    [paticipants]="participants"
-    (participantAdded)="onParticipantAdded()"
-  >
-  </add-participant-modal> -->
 
+<section class="row">
  <div class="row justify-content-center" *ngIf="!isDetailMode">
     <div class="col-12">
       <div class="row align-items-center my-4">
@@ -23,7 +17,11 @@
         </div>
       </div>
       <hr />
-      <div class="row">
+      <item-skeleton class="col-3" *ngIf="!participants">
+
+      </item-skeleton>
+      
+      <div class="row" *ngIf="participants" >
         <participant-item
           class="col-3"
           (selected)="onDetailMode(participant)"
@@ -31,23 +29,13 @@
           [participant]="participant"
         ></participant-item>
       </div>
-      <div *ngIf="participants.length == 0">
+      <div *ngIf="participants.length == 0 && participants">
         للأسف هذا المشروع لايحوي على أية مشاركين
       </div>
     </div>
   </div>
 
   
- <!-- <remove-participant-modal *ngIf="selectedParticipant"
- [participant]="selectedParticipant"
- (participantRemoved)="onParticipantRemoved()"
- > -->
-<!-- 
- </remove-participant-modal> -->
- 
-  <!-- <app-remove-participant-modal [participant]="selectedParticipant" (participantRemoved)="onParticipantRemoved()"></app-remove-participant-modal> -->
-
-  
   <div class="row" *ngIf="isDetailMode">
     <div class="card shadow mb-4 col-8 offset-2">
         <div class="card-header py-3">

src/app/projects/pages/project-bycreterion/project-bycreterion.component.html

@@ -24,3 +24,6 @@
     </div>
 </div>
 </div>
+<card-skeleton *ngIf="!projects">
+
+</card-skeleton>
\ No newline at end of file

src/app/projects/pages/project-list/project-list.component.html

@@ -13,6 +13,9 @@
 
     </div>
     <hr>
+    <item-skeleton *ngIf="projects">
+
+    </item-skeleton>
     <div *ngIf="projects">
     <div  class="row" *ngIf="projects.length > 0">
         <project-item class="col  col-4 "     *ngFor="let project of projects" [project]="project"></project-item>

src/app/shared/componenets/item-skeleton/item-skeleton.component.html

+<div class="card shadow mb-4">
+    <div class="card-body text-center">
+      <div class="avatar avatar-lg mt-4">
+        <a href="">
+            <p-skeleton shape="circle" size="4rem" styleClass="mr-2" />
+        </a>
+      </div>
+      <div class="card-text my-2">
+        
+        <p-skeleton width="80%" styleClass="mb-2" />
+
+        <p-skeleton width="50%" styleClass="mb-2" />
+
+        <p-skeleton width="50%" styleClass="mb-2" />
+          </div>
+    </div> <!-- ./card-text -->
+    <div class="card-footer">
+      <div class="row align-items-center justify-content-between">
+        <div class="col  text-center">
+          <small>
+       
+            <p-skeleton width="40%" styleClass="mb-2" />   </small>
+        </div>
+      
+        <div class="col  text-center">
+          <small>
+         
+            <p-skeleton width="40%" styleClass="mb-2" /> </small>
+        </div>
+
+      
+      </div>
+    </div> <!-- /.card-footer -->
+  </div>
\ No newline at end of file

src/app/shared/componenets/item-skeleton/item-skeleton.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'item-skeleton',
+  templateUrl: './item-skeleton.component.html',
+  styleUrl: './item-skeleton.component.css'
+})
+export class ItemSkeletonComponent {
+
+}

src/app/shared/shared.module.ts

@@ -15,6 +15,7 @@ import { CardSkeletonComponent } from './componenets/card-skeleton/card-skeleton
 import { KnobModule } from 'primeng/knob';
 import { ProgressBarModule } from 'primeng/progressbar';
 import { SkeletonModule } from 'primeng/skeleton';
+import { ItemSkeletonComponent } from './componenets/item-skeleton/item-skeleton.component';
 
 
 
@@ -30,7 +31,8 @@ import { SkeletonModule } from 'primeng/skeleton';
     FullnamePipe,
     StateTranslatePipe,
     CardItemComponent,
-    CardSkeletonComponent
+    CardSkeletonComponent,
+    ItemSkeletonComponent
   
   ],
   imports: [
@@ -39,6 +41,7 @@ import { SkeletonModule } from 'primeng/skeleton';
     SkeletonModule
     ],
   exports:[
+    ItemSkeletonComponent,
     HeaderComponent,
     FooterComponent,    
     SidebarComponent,