<template>
  <div class="table">
    <slot v-if="!loading"></slot>
    <div class="loading center" v-if="loading">
        <UiLoadingIcon size="2.5rem"></UiLoadingIcon>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
    loading: boolean
}>();
</script>

<style scoped>
.table {
    height: 100%;
    width: 100%;
    display: grid;
}
.loading {
    height: 100%;
    width: 100%;
}
</style>

<style>
.grid-element {
    height: 2.25rem;
}
</style>