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?

javascriptvue.jsastrojs

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sass is throwing an error message saying 'Module not found' during the compilation process

After installing sass using npm ($npm install sass), I attempted to create a JSON script. Unfortunately, when running it, I encountered an error stating 'Cannot find module'. ...

javascriptjsonsassbootstrap-5

How to handle the discrepancy between NextJS exporting files with a .html extension, yet in the <Link> component there is no .html specified

I have been working on my NextJS application and I've realized that all the links within it are built using the <Link href="/my-page"><a>My page</a></Link> component. After exporting the app to generate a static site, ...

javascriptnext.js

The function Expo.Fingerprint.isEnrolledAsync will provide an output that includes information about fingerprint

Attempting to incorporate fingerprint authentication into my react native app. Utilized Expo SDK for this purpose. Although the Expo.Fingerprint.authenticateAsync() method claims to return a boolean, it actually returns an object when examined closely. E ...

javascriptiosreactjsreact-native

Exploring the capabilities of multiple nested controllers in AngularJS

I am facing a challenge that I haven't been able to find a solution for online. My search form includes multiple instances of a common controller used for typeahead/autocomplete searches. Each controller is set up with different parameters for search ...

javascriptangularjs

how to load CSS and JS files on certain views in Laravel 5.2

Currently, I am facing a situation where I need to ensure that the CSS and JS files are loaded only on specific views in Laravel 5.2. Due to my boss's decision to eliminate RequireJS for loading JS files on our blade templates, we are now exploring a ...

javascriptphpcsslaravel-5

Unexpected TypeScript issue: Unable to access the 'flags' property of an undefined entity

Upon creating a new project and running the serve command, I encountered the following error: ERROR in TypeError: Cannot read property 'flags' of undefined Node version: 12.14 NPM version: 6.13 Contents of package.json: { "name": "angular-t ...

javascriptangulartypescript

Combine various arrays of objects into one consolidated object

Problem: There are untyped objects returned with over 100 different possible keys. I aim to restructure all error objects, regardless of type, into a singular object. const data = [ { "type":"cat", "errors" ...

javascripttypescriptreduce

Leverage props in Vue 3 composables

While upgrading an app from vue 2 to vue 3, I encountered some difficulties with composables. My issue revolves around using props in the composable, which doesn't seem to work as expected. The code snippet is extracted from a functioning component an ...

vue.jsvuejs3vue-composition-apivue-script-setup

Both if and else statements are carrying out code in JavaScript/jQuery

The second if statement is functioning correctly, but the first one always triggers the else statement and never stands alone. This jQuery function is enclosed within another function that is invoked under the "$(document).ready" command. I resorted to u ...

javascriptjqueryasp.net

The challenge with Normalizr library in Redux and how to address it

I am currently attempting to utilize the Normalizr library by Paul Armstrong in order to flatten the Redux state. Below are the schema definitions: import { normalize, schema } from 'normalizr' const fooSchema = new schema.Entity('foos&apo ...

javascriptjsonreactjsreduxnormalizr

I am unable to find the URL /receipt on this server, however it is functioning properly on localhost

Everything is functioning perfectly on my localhost, but once I publish the website and try to access it, I encounter an error that says "Failed to load resource: the server responded with a status of 404 (Not Found)". Let's take a look at the code s ...

vue.js

IE compatibility mode causing ckeditor dropdown to be hidden

When using the CKEditor editor bar inside a green div with another div below it, I noticed that when clicking on "font" or any other option that opens a dropdown menu, it gets hidden behind the bottom div. This issue seems to occur in browsers like Chrome ...

javascriptjqueryhtmlcssckeditor

Learn how to create a fading effect for an element when the mouse is inactive, and have it fade back in when the mouse is active again using J

There is a div with the ID "#top" that I want to have fade out after 3 seconds of mouse inactivity. Once the mouse is moved again, I would like it to fade back in. Any suggestions on how to achieve this effect? Appreciate your help! ...

javascriptjqueryuser-interface

How should an iterable be sorted in React?

Let's break down the scenario using pseudo code: {this.props.myIterable.map((iterable) => { return ( <div>iterable.somevalue</div> ) }).sort((a,b) => {return b - a}) To clarify, I am iterating over certain props and displaying ...

javascriptreactjs

VueJS: Preloading data prior to and following component initialization

VueJS is a new technology for me, and I'm currently working on a component that needs to retrieve data from an API before loading the corresponding route. The component should only load once the data is fetched. Additionally, after the component is cr ...

javascriptvue.jsvuejs2vue-component

How to Round Decimals in DataTables

I am encountering an issue with my data table's footer, which is supposed to display the sum of each column. However, while the values within the table are rounded to two decimal places, the values in the footer do not always adhere to this formatting ...

javascripthtmldatatable

Enhanced Search and Replace Techniques in HTML using jQuery and JavaScript

Although I have some experience with jQuery and Javascript, I am by no means an expert. I have been struggling to find a way to achieve my goal using minimal resources. Maybe you can assist me: This is what I am trying to accomplish: I would like to use ...

javascriptjqueryajaxregexreplace

Unlocking the power of popups with Angular

As a beginner in AngularJS, I have encountered an issue where a popup appears when clicking on the "login/signup" button. Now, I want the same popup to appear when clicking on the "upload resume" button as well. Below is the code that is currently working ...

javascriptangularjs

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

javascripthtmlcssasciinema

What is the best way to transform a string representation of data into an array and then showcase it in

After importing CSV data and converting it into the variable stringData, I am facing an issue when trying to display this data in a React table. Although I have attempted to use the map function to separate the headers and map to <th>, displaying t ...

javascriptreactjscsv