From d8d1fc7b0c745435920eb4fc516ae9b69361f9c5 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Mon, 4 Jul 2022 17:53:39 +0100
Subject: [PATCH] add skeleton to gabinete page

---
 .../pages/chat/messages/messages.page.html    |   3 -
 .../gabinete-digital.page.html                | 222 +++++++++---------
 .../pendentes/pendentes.page.ts               |  14 +-
 3 files changed, 124 insertions(+), 115 deletions(-)

diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html
index d00f37b80..09e4eb52c 100644
--- a/src/app/pages/chat/messages/messages.page.html
+++ b/src/app/pages/chat/messages/messages.page.html
@@ -1,8 +1,5 @@
 <ion-header class="ion-no-border">
   <ion-toolbar class="header-toolbar">
-    <!-- <div #rectangle class="rectangle" (press)="handlePress()">
-      Double click me to change the color
-    </div> -->
     <div class="main-header">
       <div class="header-top">
         <div class="left">
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index 3ea279daa..16823370d 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -98,41 +98,45 @@
 
             <ion-item-sliding  *ngIf="!loadCount" class="width-100">
                 <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
               </ion-item-sliding>
           </div>
 
@@ -282,79 +286,87 @@
               
               <ion-item-sliding  class="width-100">
                 <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
               </ion-item-sliding>
               <ion-item-sliding  class="width-100">
                 <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
-                  <ion-item lines="none"
-                  class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
-
-                    <div class="item-content flex-grow-1 cursor-pointer">
-                      <p class="item-content-date my-5"><ion-skeleton-text animated style="width: 90%"></ion-skeleton-text></p>
-                      <p class="item-content-title my-10"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></p>
-                      <p class="item-content-detail my-5"><ion-skeleton-text animated style="width: 100%"></ion-skeleton-text></p>
-                    </div>
-                  </ion-item>
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
+                <ion-item lines="none"
+                class="item-skeleton width-100 d-flex ion-no-border ion-no-margin ion-no-padding">
+            
+                  <div class="item-content flex-grow-1 cursor-pointer">
+                    <div class="my-2"><div style="width: 90%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 50%; background-color: #eeeeee; height: 10px;"></div></div>
+                    <div class="my-2"><div style="width: 100%; background-color: #eeeeee; height: 10px;"></div></div>
+                  </div>
+            
+                </ion-item>
               </ion-item-sliding>
             </div>
 
diff --git a/src/app/shared/gabinete-digital/pendentes/pendentes.page.ts b/src/app/shared/gabinete-digital/pendentes/pendentes.page.ts
index db9bb0e79..76984ad0f 100644
--- a/src/app/shared/gabinete-digital/pendentes/pendentes.page.ts
+++ b/src/app/shared/gabinete-digital/pendentes/pendentes.page.ts
@@ -35,7 +35,7 @@ export class PendentesPage implements OnInit {
     private storage: Storage
     ) {
       this.loggeduser = authService.ValidatedUser;
-    }
+  }
 
   ngOnInit() {
 
@@ -80,13 +80,13 @@ export class PendentesPage implements OnInit {
       }
     })
 
-}
+  }
 
-getFromDb() {
-    this.storage.get('pendente-list').then((pendentes) => {
-      this.listToPresent =pendentes
-    })
-}
+  getFromDb() {
+      this.storage.get('pendente-list').then((pendentes) => {
+        this.listToPresent =pendentes
+      })
+  }
 
   doRefresh() {
     setTimeout(()=>{