first commit

src/components/UI/ImageComp.vue

@@ -0,0 +1,33 @@
+<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>