fix: field sorting will send two requests in weak network (#8614)

* fix: field sorting will send two requests in weak network

* chore: optimize code

* chore: wrap handleReorderColumn with try...catch

* chore: optimize code

packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts

@@ -18,6 +18,7 @@ export const useColumnDrag = ({
   const { leftSidebarWidth } = storeToRefs(useSidebarStore())
   const { width } = useWindowSize()
 
+  const isProcessing = ref<boolean>(false)
   const draggedCol = ref<ColumnType | null>(null)
   const dragColPlaceholderDomRef = ref<HTMLElement | null>(null)
   const toBeDroppedColId = ref<string | null>(null)
@@ -106,9 +107,16 @@ export const useColumnDrag = ({
   }
 
   const handleReorderColumn = async () => {
-    dragColPlaceholderDomRef.value!.style.left = '0px'
-    dragColPlaceholderDomRef.value!.style.height = '0px'
-    await reorderColumn(draggedCol.value!.id!, toBeDroppedColId.value!)
+    isProcessing.value = true
+    try {
+      dragColPlaceholderDomRef.value!.style.left = '0px'
+      dragColPlaceholderDomRef.value!.style.height = '0px'
+      await reorderColumn(draggedCol.value!.id!, toBeDroppedColId.value!)
+    } catch (error) {
+      console.error('Failed to reorder column: ', error)
+    } finally {
+      isProcessing.value = false
+    }
     draggedCol.value = null
     toBeDroppedColId.value = null
   }
@@ -180,9 +188,11 @@ export const useColumnDrag = ({
   }
 
   // fallback for safari browser
-  const onDragEnd = (e: DragEvent) => {
+  const onDragEnd = async (e: DragEvent) => {
     e.preventDefault()
 
+    await until(() => !isProcessing.value).toBeTruthy()
+
     if (!e.dataTransfer || !draggedCol.value || !toBeDroppedColId.value) return
 
     handleReorderColumn()