Vue3 - Suspense not rendering fallback

Question

I have below two components (parent and child)

.
├── Index.vue (Parent)
└── _GetShipment.vue (Child)

In the Index.vue I am trying to get the content of the e-mail body using Office.js's getAsync:

<script>
import Shipment from './_GetShipment.vue';
import { ref, defineComponent } from 'vue';


export default defineComponent({
    setup() {
        const shipments = ref([]);

        Office.context.mailbox.item.body.getAsync(
            "text",
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    let matches = result.value.match(/S\w{3}\d{8,9}/ig);
                    if(matches){
                        shipments.value = matches;
                    }
                }
            }
        );

        return {
            shipments,
        }
    },
    components: {
        Shipment,
    },
})
</script>

<template>
     <div>
         <div v-if="shipments.length === 1">
             <Shipment :id="shipments[0]" />
         </div>
     </div>
</template>

The above checks the email body content to see if there is a regular expression match. If there is, it will add the match to an array shipments .

Currently, if there is only one match found, this will be rendered in the child component called _GetShipment :

<script>
import { ref, Suspense } from 'vue';
import route from '../../../../vendor/tightenco/ziggy/src/js';

export default {
    props: ['id'],
    async setup(props) {
        const shipment = ref();
        await fetch(route('getShipment', {id : props.id}))
            .then(response => response.json())
            .then(data => shipment.value = data);
        return { shipment };

    }
};
</script>
<template>
      <div>
         Viewing shipment {{ id }}: <br />
         <Suspense>
             <template #fallback>
                 Loading...
             </template>
             <pre>{{ shipment }}</pre>
         </Suspense>
      </div>
</template>

Fetching the e-mail body content works fine, and the same goes for getting the details using fetch() .

However, the loading fallback of Suspense is not being triggered. When loading the page, it is simple blank until fetch is completed.

Why is the #fallback not being rendered?

Answer 1

You're incorrectly applying the <Suspense> in the same component that has async setup . The <Suspense> needs to be in an ancestor (ie, any component between the root and the component using async setup ).

The fact that your component renders at all without error implies you already have a <Suspense> in an ancestor, so the solution here is to remove the one inside your async setup component, or move the <Suspense> to a wrapper that renders your fallback.