sanity-io / visual-editing

https://visual-editing-studio.sanity.build
MIT License
37 stars 20 forks source link

[UI] `Overlays.tsx` not setting draggable elements in production when using `useOptimistic` #2088

Open JohnGemstone opened 3 weeks ago

JohnGemstone commented 3 weeks ago

When using useOptimistic to update draggable array components, items are no longer set as draggable in the overlay. This only occurs in a production build, in dev it works as expected.

To Reproduce

  1. Set up an array builder like the one found in the page-builder-demo
  2. Run dev, observe draggable items
  3. Build and run start, observe items no longer draggable
  4. Remove useOptimistic
  5. Build and run start, observe draggable items, with no optimistic updates.

Expected behavior Draggable items with client-side updates in production

Screen Recordings Dev server (with useOptimistic): ✅

https://github.com/user-attachments/assets/b2df820b-9bd1-4a4a-8f00-620dac0815b1

Prod server (with useOptimistic): ❌

https://github.com/user-attachments/assets/22899037-b14a-46ff-ac5f-1bb642e6bb4e

Prod server (without useOptimistic): ✅

https://github.com/user-attachments/assets/e092c065-8365-4690-a24a-562dbe1830d6

Note: ignore the repeated fading to black related to https://github.com/sanity-io/visual-editing/issues/2087

Which versions of Sanity are you using?

@sanity/cli (global)        3.62.3 (up to date)
@sanity/assist               3.0.8 (up to date)
@sanity/icons                3.4.0 (up to date)
@sanity/image-url            1.1.0 (up to date)
@sanity/mutate              0.10.1 (up to date)
@sanity/presentation        1.17.7 (up to date)
@sanity/preview-url-secret   2.0.0 (up to date)
@sanity/util                3.62.3 (up to date)
@sanity/vision              3.62.3 (up to date)
@sanity/visual-editing       2.4.2 (up to date)
sanity                      3.62.3 (up to date)

What operating system are you using? OSX + Chrome

Which versions of Node.js / npm are you running? v22.0.0

Additional context

When testing I found that the useOptimistic hook is somehow messing with useOptimisticActorReady in production since optimisticActorReady gets set to false when it's used: https://github.com/sanity-io/visual-editing/blob/f1d04b396abbba1879c1f1f0b605269e94f4400f/packages/visual-editing/src/ui/Overlays.tsx#L329