TidGi-Desktop/docs/internal/DragAndDrop.md

Drag-and-Drop Optimistic Update (TidGi)

Implementation Summary

TidGi uses optimistic UI updates for drag-and-drop reordering in both form arrays and sidebar workspace lists. This ensures a smooth user experience without flicker or delay, even when backend or form updates are slow.

Key Points

• When a drag ends, the UI immediately updates the order using local state (store or useState), before waiting for backend or form data to update.
• The backend update (or form update) is triggered asynchronously. When the new data arrives, the local optimistic state is cleared.
• This prevents the UI from briefly reverting to the old order before the update is confirmed.

Implementation Details

• Form Arrays: Uses zustand store (itemsOrder) for optimistic rendering. See ArrayFieldTemplate.tsx and arrayFieldStore.ts.
• Sidebar Workspaces: Uses local React state (optimisticOrder) for workspace ID order. See SortableWorkspaceSelectorList.tsx.

Cautions

• Always clear the optimistic state when the real data arrives, to avoid stale UI.
• Do not mutate the original data objects; always clone or use new arrays/objects.
• If backend update fails, consider showing an error or reverting the optimistic state.

References

• ArrayFieldTemplate.tsx
• arrayFieldStore.ts
• SortableWorkspaceSelectorList.tsx