useTransition unable to unmount with async leave

[guopengliang]

🐛 Bug Report

When using async function as the leave prop in useTransition, the component always fails to update and unmount the child once the async function resolves.

To Reproduce

Steps to reproduce the behavior:

const Example = ({ toggle }) => {
    const transition = useTransition(toggle, {
        from: { x: 0 },
        enter: { x: 200 },
        // Cannot unmount with async leave
        leave: () => async (next) => {
            await next({ x: 300 });
            await next({ x: 0 });
        },
        // Can unmount with:
        // leave: { x: 0 },
    });

    return transition((values, item) => item && (
        <animated.div style={values} />
    ));
};

Expected behavior

The <animated.div> should unmount when the async leave resolves.

Environment

• react-spring v9.0.0-canary.808.15.d4e5904
• react v16.12.0

[guopengliang]

Same bug using react-spring v9.0.0-canary.808.17.55c5691

[aleclarson]

Please provide a minimal CodeSandbox or git url that shows the issue. 👍

[aleclarson]

This is fixed in the next canary (9.0.0-canary.808.18). To be released soon.

[aleclarson]

Now available in v9.0.0-rc.2 #985