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

Question

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?

This may be useful: stackoverflow.com/a/75274563/19811221 In that first example, you could use a spinner element that you manually hide once your Vue component mounts. — Alex
– Alex, Commented Nov 25, 2023 at 19:53
And how I know when the component is mounted from an Astro page? — Lucas David Ferrero
– Lucas David Ferrero, Commented Nov 26, 2023 at 6:06

Alex · Accepted Answer · 2023-11-26 20:24:39Z

1

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.

answered Nov 26, 2023 at 20:24

Alex

3632 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smac89 Jun 19 at 22:02

The proper way to do this is shown in the Astro docs: docs.astro.build/en/reference/directives-reference/…

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related