A step-by-step guide on displaying a loading spinner during the retrieval and assembly of a component framework (Astro Island) with Vue and AstroJS

Question

A step-by-step guide on displaying a loading spinner during the retrieval and assembly of a component framework (Astro Island) with Vue and AstroJS

Here is the astro code I'm working on:

---
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 "ListadoProfesionales" component is currently only rendering in the browser using VueJS.

Is there a way to display a Spinner or loading UI element while AstroJS is fetching and rendering that specific component?

javascript vue.js astrojs

Answer 1

Answer №1

If you want to have a spinner that is displayed until the framework component loads, one approach is to include a separate spinner element that is then removed or hidden.

When working with Vue, consider implementing it 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(() => {
  // In this basic example, the spinner is quickly removed once the component loads
  const spinner = document.querySelector(".spinner");
  spinner.remove();
});
</script>

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

After the Vue component has mounted, the spinner element is removed from the DOM. Keep in mind that adjustments may be necessary based on your specific component setup.

Answer 2

If you want to have a spinner that is displayed until the framework component loads, one approach is to include a separate spinner element that is then removed or hidden.

When working with Vue, consider implementing it 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(() => {
  // In this basic example, the spinner is quickly removed once the component loads
  const spinner = document.querySelector(".spinner");
  spinner.remove();
});
</script>

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

After the Vue component has mounted, the spinner element is removed from the DOM. Keep in mind that adjustments may be necessary based on your specific component setup.

A step-by-step guide on displaying a loading spinner during the retrieval and assembly of a component framework (Astro Island) with Vue and AstroJS

Answer №1

Similar questions

Incorporating multiple colors into a div with jQuery: A guide

Leveraging TypeScript to sort and extract specific elements from two arrays

Generating varying commitments from one function

Tips for preventing useEffect from triggering a route?

Utilize Bootstrap tooltips to display live results fetched via an AJAX call

Maximizing page space with ReactJS and advanced CSS techniques

Strikeout list on click of a mouse

The compiled JavaScript is getting messed up by the Grunt build process

I am attempting to pass information through the body of an Axios GET request to be used in a Django backend, but when I try to print the request.body

Determine if the input number exceeds a specified threshold by implementing JavaScript

Rgd: Double-Sided Horizontal Slide Control

navigating to the assets directory using nginx and vite

Guidance on exporting an Excel file from an HTML table, excluding the final row, using JavaScript

Encountering issues with proper function of history.listen within React Router

Outdated jQuery script no longer functioning (Wordpress)

Guide to invoking a mixin function within middleware

Combining Option Value and Name Selection Using React Hooks

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

Unshifting values in a JavaScript array only if they exist in another array

The MaterialUI FormControl API TextField is experiencing an issue where the onClick event does not trigger on the initial click