# How to show a loading spinner while fetching and compiling a component framework (Astro Island) Vue and AstroJS

I have the following astro page:

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import ListadoProfesionales from "../../components/pages/ListadoProfesionales/ListadoProfesionales.vue";

---
<BaseLayout title="Listado de profesionales">
    <main class="container py-6">
        <ListadoProfesionales client:only="vue" />
    </main>
</BaseLayout>
The framework component "ListadoProfesionales" is rendering only in the browser with VueJS.

How can I show a Spinner (or a loading UI element) while AstroJS is fetching and rendering that component?

## Answer

You can have a separate spinner element which is removed or hidden once the framework component loads.

For Vue, one way you could do it is like this:

.astro

<div class="spinner">Spinner Here</div>
<Vue client:only="vue" />

.vue component

<script setup>
import { ref, onMounted } from "vue";

const count = ref(0);

onMounted(() => {
  // Since the component in this example is basic, the spinner only briefly shows
  const spinner = document.querySelector(".spinner");
  spinner.remove();
});
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

So once the component mounts on Vue's side, remove the spinner from the DOM. You may need to do things differently depending on your component.