FileMaster

Edit File: Skeleton.vue

<template>
  
  <el-skeleton
    animated
    class="am-skeleton-congratz"
  >
    <template #template>
      <div class="am-skeleton-congratz-heading">
        <el-skeleton-item variant="circle" />
        <el-skeleton-item variant="h3" />
        <el-skeleton-item variant="text" />
      </div>
      <div class="am-skeleton-congratz-booking-info">
        <div
          v-for="(item, i) in new Array(10)"
          :key="item"
          :class="{'am-customer-info': (i === 6)}">
            <el-skeleton-item variant="text" :style="{width: `${useRandomIntFromInterval(14, 36)}%`}"/>
            <el-skeleton-item variant="text" :style="{width: `${useRandomIntFromInterval(14, 36)}%`}"/>
        </div>
      </div>
    </template>
  </el-skeleton>
  
</template>

<script setup>
// * Composables
import { useRandomIntFromInterval } from "../../../../../assets/js/common/formatting.js";
</script>

<script>
export default {
  name: "LoadingSkeleton"
}
</script>

<style lang="scss">
@mixin congrats-skeleton-block {
  .am-skeleton-congratz {

&-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 13px;

:first-child {
        width: 52px;
        height: 52px;
        margin-bottom: 9px;
      }

:nth-child(2) {
        height: 28px;
        max-width: 132px;
        margin-bottom: 4px;
      }

:last-child {
        max-width: 148px;
        height: 18px;
      }
    }

&-booking-info {
      & > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

.el-skeleton__item {
          height: 20px;
        }

}

.am-customer-info {
        border-bottom: 1px solid var(--am-c-skeleton-op20);
        padding-bottom: 12px;
      }
    }
  }
}

.amelia-v2-booking #amelia-container {
  @include congrats-skeleton-block;
}
</style>

Back