Improve loader

This commit is contained in:
Peter Maquiran
2021-07-16 11:07:11 +01:00
parent 62db07aa52
commit 7b93dbf1e2
@@ -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>