fix(profiles): stabilize drag reorder motion

Close: 7798

src/components/profile/sortable-profile-item.tsx

@@ -4,6 +4,8 @@ import { Box } from '@mui/material'
 
 import { ProfileItem, type ProfileItemProps } from './profile-item'
 
+const SORT_TRANSITION = 'transform 160ms cubic-bezier(0.2, 0, 0, 1)'
+
 type SortableProfileItemProps = Omit<
   ProfileItemProps,
   'dragHandleRef' | 'dragHandleAttributes' | 'dragHandleListeners'
@@ -18,24 +20,33 @@ export const SortableProfileItem = ({
   const {
     attributes,
     listeners,
+    setActivatorNodeRef,
     setNodeRef,
     transform,
-    transition,
+    isSorting,
     isDragging,
-  } = useSortable({ id })
+    isOver,
+  } = useSortable({ id, transition: null })
+
+  const isDiagonalMove =
+    transform !== null && transform.x !== 0 && transform.y !== 0
 
   return (
     <Box
+      ref={setNodeRef}
       sx={{
         position: 'relative',
-        transform: CSS.Transform.toString(transform),
-        transition,
+        transform: CSS.Translate.toString(transform),
+        transition:
+          isSorting && !isDragging && isOver && !isDiagonalMove
+            ? SORT_TRANSITION
+            : undefined,
         zIndex: isDragging ? 'calc(infinity)' : undefined,
       }}
     >
       <ProfileItem
         {...profileItemProps}
-        dragHandleRef={setNodeRef}
+        dragHandleRef={setActivatorNodeRef}
         dragHandleAttributes={attributes}
         dragHandleListeners={listeners}
       />