versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Make Avatar component display a loading screen while image is loading

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-20 17:50:41 -10:00
parent e309c56a86
commit 7e47dafa18
No known key found for this signature in database
1 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/avatars/avatar.vue
View file

@ -1,19 +1,38 @@
<template>
<div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!src" class="!h-full !w-full !rounded-none">
<div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
<img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
</Skeleton>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from "vue";
import Skeleton from "../skeleton/Skeleton.vue";
interface Props extends /* @vue-ignore */ HTMLAttributes {
defineOptions({
inheritAttrs: false,
});
const props = defineProps<{
src?: string;
alt?: string;
}
}>();
const imageLoaded = ref(false);
defineProps<Props>();
watch(
() => props.src,
(src) => {
if (!src) {
return;
}
// Load in background
const img = new Image();
img.src = src;
img.onload = () => {
imageLoaded.value = true;
};
},
{ immediate: true },
);
</script>