Greatly improve perf of dragging list around sidebar

- If you dragged a list rapidly around the sidebar fast enough, the actions would form a queue and sequentially happen with a noticeable delay. This greatly improves that.
- Main change is moving the setTimeout(mutation, 0) to the top level and not performing the mutation if nothing gets changed

src/dashboard-refactor/index.tsx

@@ -812,12 +812,26 @@ export class DashboardContainer extends StatefulUIElement<
                 onListDragEnd={(listId) => (e) =>
                     this.processEvent('dropList', { listId })}
                 initDropReceivingState={(listId) => ({
-                    onDragEnter: () =>
-                        this.processEvent('setDragOverListId', { listId }),
-                    onDragLeave: () =>
+                    onDragEnter: (e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        // Needed to push this op back on the event queue, so it fires after the previous
+                        //  list item's `onDropLeave` event
+                        setTimeout(
+                            () =>
+                                this.processEvent('setDragOverListId', {
+                                    listId,
+                                }),
+                            0,
+                        )
+                    },
+                    onDragLeave: (e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
                         this.processEvent('setDragOverListId', {
                             listId: undefined,
-                        }),
+                        })
+                    },
                     onDrop: (dataTransfer) =>
                         this.processEvent('dropOnListItem', {
                             listId,

src/dashboard-refactor/lists-sidebar/components/sidebar-item.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { fonts } from 'src/dashboard-refactor/styles'
 import styled, { css } from 'styled-components'
-import Icon from '@worldbrain/memex-common/lib/common-ui/components/icon'
-import { TooltipBox } from '@worldbrain/memex-common/lib/common-ui/components/tooltip-box'
 import type { DropReceivingState } from 'src/dashboard-refactor/types'
 
 export interface Props {
@@ -38,14 +36,6 @@ export default class ListsSidebarItem extends React.PureComponent<
 > {
     state: State = { isHovering: false, canDisableHover: false }
 
-    private handleDragEnter: React.DragEventHandler = (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        // Needed to push this op back on the event queue, so it fires after the previous
-        //  list item's `onDropLeave` event
-        setTimeout(() => this.props.dropReceivingState?.onDragEnter(), 0)
-    }
-
     private handleDrop: React.DragEventHandler = (e) => {
         e.preventDefault()
         if (!this.props.dropReceivingState?.canReceiveDroppedItems) {
@@ -75,7 +65,7 @@ export default class ListsSidebarItem extends React.PureComponent<
                     })
                 }}
                 spaceSidebarWidth={this.props.spaceSidebarWidth}
-                onDragEnter={this.handleDragEnter}
+                onDragEnter={this.props.dropReceivingState?.onDragEnter}
                 onDragLeave={this.props.dropReceivingState?.onDragLeave}
                 onDragOver={(e) => {
                     e.preventDefault()

src/dashboard-refactor/lists-sidebar/index.tsx

@@ -116,16 +116,7 @@ export default class ListsSidebar extends PureComponent<ListsSidebarProps> {
             <ReorderLine
                 isActive={this.props.someListIsDragging}
                 isVisible={reorderLineDropReceivingState.isDraggedOver}
-                onDragEnter={(e: React.DragEvent) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    // Needed to push this op back on the event queue, so it fires after the previous
-                    //  list item's `onDropLeave` event
-                    setTimeout(
-                        () => reorderLineDropReceivingState.onDragEnter(),
-                        0,
-                    )
-                }}
+                onDragEnter={reorderLineDropReceivingState.onDragEnter}
                 onDragLeave={reorderLineDropReceivingState.onDragLeave}
                 onDragOver={(e: React.DragEvent) => {
                     e.preventDefault()

src/dashboard-refactor/logic.ts

@@ -4382,9 +4382,13 @@ export class DashboardLogic extends UILogic<State, Events> {
         })
     }
 
-    setDragOverListId: EventHandler<'setDragOverListId'> = async ({
+    setDragOverListId: EventHandler<'setDragOverListId'> = ({
         event,
+        previousState,
     }) => {
+        if (event.listId === previousState.listsSidebar.dragOverListId) {
+            return
+        }
         this.emitMutation({
             listsSidebar: { dragOverListId: { $set: event.listId } },
         })

src/dashboard-refactor/types.ts

@@ -52,6 +52,7 @@ import type { SpaceSearchSuggestion } from '@worldbrain/memex-common/lib/editor'
 import type { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 import type { BulkEditCollection } from 'src/bulk-edit/types'
 import type { PersonalCloudRemoteInterface } from 'src/personal-cloud/background/types'
+import type { DragEventHandler } from 'react'
 
 export interface RootState {
     loadState: TaskState
@@ -152,8 +153,8 @@ export interface DropReceivingState {
     wasPageDropped?: boolean
     canReceiveDroppedItems?: boolean
     onDrop(dataTransfer: DataTransfer): void
-    onDragEnter(): void
-    onDragLeave(): void
+    onDragEnter: DragEventHandler
+    onDragLeave: DragEventHandler
 }
 
 export interface SearchResultTextPart {