Flash message is being triggered for partial reloads

[matthewknill]

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-vue3 version: 0.6.0

Describe the problem:

As long as I have previously saved the form, whenever I do a partial reload, the last flash message is displayed.

Essentially, I want to know if someone has changed the form recently and thus I do a partial reload to determine the active user.

public function edit(Order $order)
{
    return Inertia::render('Orders/Edit', [
        'order' => fn () => [
            'id' => $order->id,
            'data' => $order->dirty_data ?? $order->data,
            'client' => $order->client,
            'updated_at' => $order->updated_at,
            'activeUser' => [
                'id' => $order->activeUser->id,
                'name' => $order->activeUser->name,
            ],
            'dirty' => $order->orderDataIsDirty()
        ],
        // other non relevant data ...
    ]);
}

And then before I perform my update in Vue, I run the following:

await new Promise((resolve) => {
    Inertia.reload({
        only: ['order'],
        onFinish: function () {
            resolve(true)
        },
    })
})

This means that I can know if another user has performed an update and warn the current user that data may be lost.

However, when the partial reload is complete but before the form has updated, it flashes the last message that was displayed.

I have tried adding ->with('success', '') to my render method to no avail.

The following is my flash message code (quite similar to the PingCRM code just with an additional display condition):

watch: {
    '$page.props.flash': {
        handler() {
            this.flash()
        },
        deep: true,
    },
},
methods: {
    flash() {
        let vm = this
        if (this.$page.props.flash.display) {
            if (this.$page.props.flash.error || Object.keys(this.$page.props.errors).length > 0) {
                this.type = 'error'
                this.show = true
                setTimeout(function () {
                    vm.show = false
                }, 2000)
            } else if (this.$page.props.flash.success) {
                this.type = 'success'
                this.show = true
                setTimeout(function () {
                    vm.show = false
                }, 2000)
            }
        }
    },
},

Steps to reproduce:

1. Save form which produces an error or success flash message
2. Trigger a partial reload