add skeleton to chat list

This commit is contained in:
tiago.kayaya
2021-12-17 16:54:18 +01:00
parent d992f546ef
commit 9a8be67bd1
4 changed files with 49 additions and 25 deletions
+33 -2
View File
@@ -44,7 +44,7 @@
<div class="width-100" [ngSwitch]="segment">
<ion-list *ngSwitchCase="'Contactos'">
<ion-item-sliding>
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
*ngFor="let dm of userDirectMessages"
[class.item-active]="dm._id == idSelected">
<div class="item-icon">
@@ -85,9 +85,24 @@
</div>
</div>
</ion-item-sliding>
<ion-item-sliding *ngIf="showLoader || userDirectMessages.length < 1">
<div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
<div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-chat-grey.svg"></ion-icon></div>
<div class="item-content flex-grow-1 cursor-pointer">
<div class="item-title-time">
<div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
<div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
</div>
<div class="item-description d-flex align-items-center">
<fa-icon icon="file-alt" class="file-icon"></fa-icon>
<ion-skeleton-text animated style="width: 95%; margin-left:5%"></ion-skeleton-text>
</div>
</div>
</div>
</ion-item-sliding>
</ion-list>
<ion-list *ngSwitchCase="'Grupos'">
<ion-item-sliding>
<ion-item-sliding *ngIf="!showLoader">
<div *ngFor="let group of allGroups"
[class.item-active]="group._id ==idSelected"
class="item item-hover d-flex">
@@ -123,9 +138,25 @@
</div>
</div>
</ion-item-sliding>
<ion-item-sliding *ngIf="showLoader || allGroups.length < 1">
<div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
<div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-group-chat-grey.svg"></ion-icon></div>
<div class="item-content flex-grow-1 cursor-pointer">
<div class="item-title-time">
<div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
<div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
</div>
<div class="item-description d-flex align-items-center">
<fa-icon icon="file-alt" class="file-icon"></fa-icon>
<ion-skeleton-text animated style="width: 95%; margin-left:5%"></ion-skeleton-text>
</div>
</div>
</div>
</ion-item-sliding>
</ion-list>
</div>
<!-- <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->
</div>
</div>