I've been working on implementing lazy loading for a Login component by using <Suspense> and <template> with default and callback. Everything seems to be functioning properly, except that the Loading component does not disappear after the main component has loaded.
Here is an excerpt from my router.js file:
import { createWebHistory, createRouter } from 'vue-router'
const Login = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
import ('./components/pages/auth/Login'),
)
}, 1000)
})
}
const Register = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(
import ('./components/pages/auth/Register'),
)
}, 1000)
})
}
const routes = [{
path: '/login',
name: 'login',
component: Login,
},
{
path: '/register',
name: 'register',
component: Register,
}
]
const router = createRouter({
history: createWebHistory(),
routes: routes
})
export default router
The root component file, App.vue, looks like this:
<template>
<div>
<Suspense>
<template #default>
<RouterView />
</template>
<template #fallback>
<div>
<h1>Loading....</h1>
</div>
</template>
</Suspense>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style scoped>
div {
height: 100%;
width: 100%;
background-color: black;
}
h1 {
font-size: 30px;
font-weight: bold;
color: white;
}
</style>
After the component loads, the Loading background should disappear but it doesn't. Here's how it looks: The black background persists even after the component has loaded. Click here for a visual reference