X-Financial/web/src/components/shared/TableLoadingState.vue

<template>
  <span v-if="floating" class="table-loading-anchor" aria-hidden="true"></span>
  <Teleport to="body" :disabled="!floating">
    <div
      class="table-loading"
      :class="[variant, tone, { 'screen-floating': floating, 'modal-floating': floating && blocking }]"
      role="status"
      :aria-label="ariaLabel"
      aria-live="polite"
    >
      <FloatingLightBandWindow
        :icon="icon"
        :message="message"
        :motion="motion"
        :title="title"
        :tone="tone"
        :variant="variant"
      />
    </div>
  </Teleport>
</template>

<script setup>
import { computed } from 'vue'

import FloatingLightBandWindow from './FloatingLightBandWindow.vue'

const props = defineProps({
  variant: {
    type: String,
    default: 'panel',
    validator: (value) => ['panel', 'detail', 'overlay', 'drawer', 'banner'].includes(value)
  },
  tone: {
    type: String,
    default: 'theme',
    validator: (value) => ['theme', 'sky', 'success'].includes(value)
  },
  title: { type: String, default: '' },
  message: { type: String, default: '' },
  icon: { type: String, default: 'mdi mdi-loading' },
  motion: {
    type: String,
    default: 'loop',
    validator: (value) => ['loop', 'entry'].includes(value)
  },
  floating: { type: Boolean, default: false },
  blocking: { type: Boolean, default: false },
  showSkeleton: { type: Boolean, default: true },
  skeletonRows: { type: Number, default: 5 }
})

const ariaLabel = computed(() => [props.title, props.message].filter(Boolean).join(', ') || 'Loading')
</script>

<style scoped>
.table-loading {
  width: 100%;
  color: #64748b;
}

.table-loading-anchor {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.table-loading.screen-floating {
  position: fixed;
  inset: 0;
  z-index: 430;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(248, 250, 252, 0.08);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  pointer-events: none;
}

.table-loading.screen-floating.modal-floating {
  z-index: 560;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
}

.table-loading.panel {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 28px 24px;
}

.table-loading.panel.screen-floating {
  min-height: 100dvh;
  padding: 24px;
}

.table-loading.detail {
  min-height: 180px;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 22px 24px;
}

.table-loading.overlay,
.table-loading.drawer {
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
}

.table-loading.overlay {
  min-height: 0;
}

.table-loading.drawer {
  min-height: 160px;
}

.table-loading.banner {
  display: block;
  min-height: 0;
  padding: 0;
  color: #255b7d;
}
</style>