added loading for MOE homepage

MOE_MAIN-COLOR_CHANGES
umasoodch 3 years ago
parent a87d563a38
commit 80a0aea615

@ -61,6 +61,94 @@
</ion-row>
</ion-row>
<div *ngIf="!menuEntries">
<ion-list style="background: transparent; margin-bottom: 10px;">
<ion-list-header>
<ion-skeleton-text [animated]="true" style="width: 90px"></ion-skeleton-text>
</ion-list-header>
<ion-item style="--background: transparent">
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
</ion-item>
</ion-list>
<div class="empty-div">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</div>
<ion-list style="background: transparent">
<ion-list-header>
<ion-skeleton-text [animated]="true" style="width: 90px"></ion-skeleton-text>
</ion-list-header>
<ion-item style="--background: transparent">
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
</ion-item>
</ion-list>
<ion-list style="background: transparent">
<ion-list-header>
<ion-skeleton-text [animated]="true" style="width: 90px"></ion-skeleton-text>
</ion-list-header>
<ion-item style="--background: transparent">
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
</ion-item>
</ion-list>
<ion-list style="background: transparent">
<ion-list-header>
<ion-skeleton-text [animated]="true" style="width: 90px"></ion-skeleton-text>
</ion-list-header>
<ion-item style="--background: transparent">
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
<ion-thumbnail slot="start" style="height: 90px; width: 90px;">
<ion-skeleton-text [animated]="true"></ion-skeleton-text>
</ion-thumbnail>
</ion-item>
</ion-list>
</div>
<!-- <ion-row *ngIf="showStaticServices">
<ion-col size="12">
<ion-label> {{'general,other-services' | translate}} </ion-label>

@ -189,4 +189,19 @@ ion-label {
img {
width: 25px;
}
}
ion-skeleton-text {
--border-radius: 15px;
--background: rgba(188, 0, 255, 0.065);
--background-rgb: 2, 77, 113;
}
.empty-div {
border-radius: 20px;
padding: 10px;
width: 100%;
margin-bottom: 20px;
margin-left: 5px !important;
height: 140px;
}
Loading…
Cancel
Save