Avatar with loading state demonstration

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Spinner } from "@/components/ui/spinner"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="

const loading = ref(true)
let interval: ReturnType<typeof setInterval> | undefined

onMounted(() => {
  interval = setInterval(() => {
    loading.value = !loading.value
  }, 2000)
})

onBeforeUnmount(() => {
  clearInterval(interval)
})
</script>

<template>
  <div class="relative">
    <Avatar>
      <AvatarImage :src="PIXEL" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <div
      v-if="loading"
      class="bg-background/60 absolute inset-0 flex items-center justify-center rounded-full"
    >
      <Spinner class="text-primary" />
    </div>
  </div>
</template>