doneit-web/src/app/pages/gabinete-digital/expediente/expediente.page.html

<ion-header class="ion-no-border">
  <app-header></app-header>
</ion-header>
<ion-content>
  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
     <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <div class="main-content d-flex height-100" [ngSwitch]="segment">
    <div class="content d-flex flex-column width-100">
      <div class="header-content">
        <div class="header-icon-left">
          <button class="btn-no-color cursor-pointer" (click)="goBack()">
            <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
          </button>
        </div>
        <div class="header-title">
          <label>Expediente</label>
        </div>
        <div class="btn-refresh">
          <button class="btn-no-color" (click)="doRefresh($event)">
            <ion-icon slot="end" class="title-icon" name="reload-circle"></ion-icon>
          </button>
        </div>
    </div>

  <div class="width-100" *ngIf="taskslist">

    <ion-list>
      <div
          class="expediente cursor-pointer"
          *ngFor = "let task of taskslist"
          (click)="goToExpediente(task.SerialNumber)"
          >
            <div class="item width-100">
              <div class="exp-top-detail width-100">
                <div class="exp-date">
                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
                </div>
                <div class="exp-remetente">
                  <ion-label>{{task.Remetente}}</ion-label>
                </div>
                <div class="exp-icon">
                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                  <label></label>
                </div>
              </div>
              <div class="exp-bottom-detail">
                <ion-label>{{ task.Folio }}</ion-label>
              </div>
            </div>
          </div>
    </ion-list>
  </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>
</div>
</div>
</ion-content>