99vfx.com | Premium Web Community Forum

🎉 Join the Community – It’s Free! Register a free account today to become a member!

Reply to thread

Message: <blockquote data-quote="Brilliant" data-source="post: 254" data-attributes="member: 4">Adding a splash screen for the full-page loading cycle in a Vue 3 app is a common requirement to provide feedback to the user while the app is initializing or loading data. Here's how you can implement it:---1. Basic IdeaYou can use a splash screen component that is shown until the app finishes loading. This involves:Adding a splash screen element to the DOM.Controlling its visibility based on a loading state.---2. Implementation Stepsa. Add a Splash Screen to Your TemplateAdd a splash screen element in the root App.vue file:[CODE=javascript]<template>  <div id="app">        <div v-if="isLoading" class="splash-screen">      Loading...    </div>        <div v-else>      <router-view />    </div>  </div></template><script>export default {  data() {    return {      isLoading: true, // Initial state for splash screen    };  },  mounted() {    // Simulate an async operation (e.g., fetch initial data or wait for app initialization)    setTimeout(() => {      this.isLoading = false; // Hide splash screen when loading is complete    }, 2000); // Adjust time as needed  },};</script><style>/* Basic Splash Screen Styling */.splash-screen {  position: fixed;  top: 0;  left: 0;  width: 100vw;  height: 100vh;  background-color: #ffffff; /* Change color to match your design */  display: flex;  justify-content: center;  align-items: center;  z-index: 9999; /* Ensure it appears above everything */}.splash-screen p {  font-size: 1.5rem;  color: #333; /* Adjust text color */}</style>---[/CODE]b. Use Vuex/Global State (Optional)If your app loads data from multiple sources or the loading logic is scattered across components, you can manage the loading state using Vuex or a global variable.1. Create a global loading state:[CODE=javascript]// store.jsimport { createStore } from 'vuex';export default createStore({  state: {    isLoading: true,  },  mutations: {    setLoading(state, status) {      state.isLoading = status;    },  },  actions: {    finishLoading({ commit }) {      commit('setLoading', false);    },  },});[/CODE]2. Update App.vue:[CODE=javascript]<template>  <div id="app">    <div v-if="$store.state.isLoading" class="splash-screen">      Loading...    </div>    <div v-else>      <router-view />    </div>  </div></template><script>export default {  mounted() {    // Simulate app initialization or data fetching    setTimeout(() => {      this.$store.dispatch('finishLoading');    }, 2000);  },};</script>---[/CODE]c. Show Splash Screen During Navigation (Router Hook)To keep the splash screen visible during navigation between routes:1. Add a beforeEach hook in your router:[CODE=javascript]// router.jsimport { createRouter, createWebHistory } from 'vue-router';import store from './store'; // Import the Vuex storeconst router = createRouter({  history: createWebHistory(),  routes: [    // Define your routes  ],});router.beforeEach((to, from, next) => {  store.commit('setLoading', true); // Show splash screen  next();});router.afterEach(() => {  setTimeout(() => {    store.commit('setLoading', false); // Hide splash screen after navigation  }, 500); // Add a delay if necessary});export default router;[/CODE]2. Update App.vue to use the store state for the splash screen visibility.---3. Enhancing the Splash ScreenTo improve the user experience, consider adding:Animations: Use CSS transitions or libraries like Animate.css.Loading Indicators: Add a spinner or progress bar.Branding: Include a logo or branding element in the splash screen.Example (with animations):[CODE=javascript].splash-screen {  animation: fadeOut 1s ease-in-out forwards;}@keyframes fadeOut {  0% {    opacity: 1;  }  100% {    opacity: 0;    visibility: hidden;  }}---[/CODE]4. Optional: Loading Data DynamicallyIf you want to wait for real data to load:[CODE=javascript]mounted() {  fetch('/api/data')    .then((response) => response.json())    .then(() => {      this.isLoading = false; // Hide splash screen after data is fetched    })    .catch(() => {      this.isLoading = false; // Hide even if there is an error    });}---[/CODE]Final NotesThe above solution is flexible and works with Vue Router, Vuex, or standalone components.Make sure your splash screen does not block users for too long—use skeleton screens or partial loading for better UX if necessary.</blockquote>