Why drop()/end() are not awaiting for Promises?

[Artiom Neganov]

Currently, there seems to be no way to detect, that we're still doing something - asking a user for a confirmation upon DND or sending something on the backend. In other words, upon finishing a DND, it might take time to decide upon a specific action to take when firing the business logic behind the move.

For example, granted the item type is { from?: Data, to?: Data } and drop() and end() are async functions, we could write:

drop: async (item) => {
  const ret = await confirmDialog("Are you sure to move ${item.name} to ${currentName}?");
  return ret === "yes" ? {...item,  to: currentItem} : null
}

end: async (item, monitor) => {
  const res = monitor.getDropResult()
  if (res != null) {
    await callApi(res)
  }
}

OR

drop: (item) => ({...item,  to: ...currentItem})

end: async (item, monitor) => {
  const res = monitor.getDropResult()
  const ret = await confirmDialog("Are you sure to move ${item.name} to ${currentName}?");
  if (ret === "yes") {
    return await callApi(res)
  }
}

This way, we would be informed that a dragging operation is still in progress. Both source and target components could reflect this in their styles.

I just wonder why it's not done this way. In JS you get such a beautiful async almost for free. It's also good because it doesn't block the event loop. But I'm sure you know all this. Then... why?