[Bug]: Interactions panel fails when stepping through "waitForElementToBeRemoved" as the element's been removed

Describe the bug

This is tricky.

Suppose there's an element in a page, which gets removed in 500ms (e.g. loading spinner). When writing a play function that asserts for that element to be removed, like so:

play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement);
    await waitForElementToBeRemoved(await canvas.findByText('loading...'))
    await userEvent.click(getByRole('button')) // button is only visible after spinner is gone!
},

If you click to start on the step debugger, by the time you think of clicking on the next step, the spinner is already gone. This means that stepping through the steps will fail.

I'm not sure what's a solution to this scenario, or even if there is a good solution!

To Reproduce

No response

System

No response

Additional context

No response