Vue3 Suspense Parent > Child Animation

Question

I would like to leverage Vue3 Suspense to initiate a loading state at the parent level that triggers animations in the children. When the request resolves at the parent level, I would like 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
     ...

————————————————————

How can I trigger the loading state at the parent level then show CHILD LOADING !! on each child instance until the request to fetchItems() at the parent level is resolved?

Here's a codesandbox that approximates the problem (see "home" tab).