<template>
    <div class="image-comp">
        <img class="image-comp__image" :src="src" @load="imageLoaded()" />
        <FontAwesomeIcon class="image-comp__loader fa-spin-pulse" icon="spinner" v-show="!loaded" />
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps<{ src: string }>();

const loaded = ref(false);

function imageLoaded() {
    loaded.value = true;
}
</script>

<style lang="scss">
.image-comp {
    &__image {
        max-width: 100%;
        max-height: 100%;
    }

    &__loader {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}
</style>
