src/components/LoadingIndicator.vue

<script lang="ts" setup>
import BarLoader from '@/components/BarLoader.vue'
import DotsLoader from '@/components/DotsLoader.vue'
import SpinnerLoader from '@/components/SpinnerLoader.vue'
import type { LoadingStyle } from '@/types/chat'
import { computed, type Component } from 'vue'

const props = defineProps<{
  style: LoadingStyle
  active: boolean
}>()

const componentMap: Record<LoadingStyle, Component | null> = {
  dots: DotsLoader,
  spinner: SpinnerLoader,
  bar: BarLoader,
  none: null,
}

const selectedComponent = computed(() => componentMap[props.style])
</script>

<template>
  <div v-if="active && selectedComponent">
    <component :is="selectedComponent" />
  </div>
</template>

<style></style>