<template>
  <section class="ctms-state ctms-state-loading state state-loading">
    <h3 class="ctms-state-title state-title">{{ title }}</h3>
    <p class="ctms-state-desc state-desc">{{ description }}</p>
    <el-skeleton :rows="rows" animated class="ctms-state-skeleton" />
  </section>
</template>

<script setup lang="ts">
import { TEXT } from "../locales";

withDefaults(
  defineProps<{
    rows?: number;
    title?: string;
    description?: string;
  }>(),
  {
    rows: 4,
    title: TEXT.common.loading,
    description: TEXT.common.messages.loadSuccess,
  }
);
</script>
