From 7b93dbf1e254828d38423fb3eb45103d9cff1637 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Fri, 16 Jul 2021 11:07:11 +0100
Subject: [PATCH] Improve loader

---
 .../despachos/despachos.page.html             | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/app/shared/gabinete-digital/despachos/despachos.page.html b/src/app/shared/gabinete-digital/despachos/despachos.page.html
index 4b89cdbb5..436190370 100644
--- a/src/app/shared/gabinete-digital/despachos/despachos.page.html
+++ b/src/app/shared/gabinete-digital/despachos/despachos.page.html
@@ -9,6 +9,7 @@
   </div>
 </ion-header>
 <ion-content>
+
   <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh()">
       <ion-refresher-content
         pullingIcon="chevron-down-circle-outline"
@@ -16,9 +17,10 @@
         refreshingSpinner="circles"
         refreshingText="A actualizar...">
       </ion-refresher-content>
-    </ion-refresher>
+  </ion-refresher>
   
-  <div *ngIf="despachoList.length >= 1" class="overflow-y-auto height-100 width-100">
+  <div class="overflow-y-auto height-100 width-100">
+    <div *ngIf="despachoList.length >= 1">
       <ion-list part="divo">
         <ion-item 
             class="expediente ion-no-padding cursor-pointer"  
@@ -52,31 +54,33 @@
               </div>
             </ion-item>
       </ion-list>
+    </div>
+    <div *ngIf="skeletonLoader && despachoList.length == 0">
+    
+      <ion-list>
+        <ion-item>
+          <ion-thumbnail slot="end">
+            <ion-skeleton-text animated></ion-skeleton-text>
+          </ion-thumbnail>
+          <ion-label>
+            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-thumbnail slot="end">
+            <ion-skeleton-text animated></ion-skeleton-text>
+          </ion-thumbnail>
+          <ion-label>
+            <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
   </div>
-  <div *ngIf="skeletonLoader">
-  
-    <ion-list>
-      <ion-item>
-        <ion-thumbnail slot="end">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-          <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-thumbnail slot="end">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-          <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  </div>
+
 </ion-content>