I have implemented a loading spinner in my Vue project to display until the data is fully loaded. I created a separate component called LoadingComponent.vue for this purpose.
<template>
<div class="preloader" v-if="show">
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</template>
<script>
export default {
name: "PreloaderComponent",
data: () => ({
show: true
}),
mounted(){
if(Boolean(this.show)) this.showToggle()
},
methods: {
showToggle(){
setTimeout(() => {
this.show = false
}, 1000)
}
}
}
</script>
<style lang="scss">
.preloader {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1050;
background: rgba(0, 0, 0, .3);
display: flex;
align-items: center;
justify-content: center;
}
</style>
To integrate the LoadingComponent with Dashboard.vue and make the spinner disappear once all widgets are loaded, some additional modifications are required. The current implementation does not hide the spinner after all widgets are loaded.
In order to address this issue and enhance the user experience, I am exploring solutions to automatically add a black spinner and slightly dim the background while the dashboard data is loading, which should continue working seamlessly even as new API calls are added in the future.
I am seeking a solution that ensures the loading spinner remains visible on the dashboard until all page content is successfully loaded. It should be optimized to handle cases where data retrieval from the API may take longer than expected or when the data loads quickly, preventing users from waiting unnecessarily.