I want to utilize Vue3 Suspense to trigger a loading state at the parent level that activates animations in the children. Once the request is completed at the parent level, I aim to remove the animation from the children.
App Header:
router-view(v-slot="{ Component, route }")
template(v-if="Component")
transition(:name="route.meta.transition" appear)
KeepAlive
Suspense
component(:is="Component")
template(#fallback='')
div.loading-div LOADING !!
Parent Template:
<template lang="pug">
section.discover-row
div.discover-row-carousel
DiscoverItem(
v-for="(item, index) in DiscoverItemStore.automobiles"
:key="item._id"
:item="item"
:index="index"
)
</template>
<script setup>
...
import { useDiscoverItemStore } from "@/stores/DiscoverItemStore"
const DiscoverItemStore = useDiscoverItemStore()
DiscoverItemStore.fetchItems()
</script>
Child Template:
Suspense
template(#default='')
div.item SHOW SOME STUFF
template(#fallback='')
div.loading-div CHILD LOADING !!
—
Request (from pinia store):
async fetchItems() {
this.automobiles = []
this.items = []
this.loading = true
try {
this.items = await fetch(discoverUrl)
.then((response) => response.json())
this.automobiles = [...this.items.Cars, ...this.items.Suvs, ...this.items.Trucks, ...this.items.Vans]
this.loading = false
...
————————————————————
What's the best way to initiate the loading state at the parent level and display CHILD LOADING !! on each child instance until the request to fetchItems() at the parent level is completed?
Check out this codesandbox link for a demonstration of the issue (refer to the "home" tab).