Dynamically imported components blink when moving them between lists

[gustojs]

Hi, thanks for working on this library! I like it a lot.

Here's one issue that I've noticed. I can't provide a reproduction right now, I'll deliver it later, for now I'm putting it here so that I won't forget.

While any component imported the stardard way behaves just fine using vue-draggable-plus:

import SomeComponent from 'SomeComponent.vue'

If the same component is imported dynamically with defineAsyncComponent, it will blink when moving from one list to another.

const SomeComponent = defineAsyncComponent(() => import(`${someComponentName}.vue`))

Every instance of such a component on a changed list will blink, no matter if Sortable's animation is used or not, and regardless of TransitionGroup. If a normally imported component contains dynamically imported one, only the child will blink.

Such blinking doesn't happen when changing order in the same list.

[sunlho]

Hello,

I recently came across your post Issue on the vue-draggable-plus GitHub repository and noticed that you were encountering an issue that closely resembles a challenge I'm currently facing in my own project. I'm reaching out to inquire if you've found a solution or workaround since your last update on the issue.

Any insights or suggestions you could share would be immensely appreciated.

Thank you in advance for your time and assistance. Looking forward to any guidance you can provide.

[Alfred-Skyblue]

This seems to be an issue related to async . Could you provide a minimal reproduction case to help me better investigate the problem?

[sunlho]

This seems to be an issue related to async . Could you provide a minimal reproduction case to help me better investigate the problem?

While writing a minimal case example, I discovered that the issue I mentioned was caused by the nature of the defineAsyncComponent function. I found a solution in Vue here: https://github.com/vuejs/core/issues/3978#issue-924952787. Thank you for your response.