search

phoenixframework / phoenix_live_view

Rich, real-time user experiences with server-rendered HTML
https://hex.pm/packages/phoenix_live_view
MIT License
6.23k stars 932 forks source link

Provide a way to lock/unlock elements purely client-side #3516

Open SteffenDE opened 2 hours ago

SteffenDE commented 2 hours ago

When using external libraries like motion.dev with LiveView, we'd ideally have a way to trigger those animations similar to how we do a JS.transition. The important part is that we'd want to support locking the elements to prevent them from being patched while the animation is running.

I think we could extend the JS commands (on the client) to also support a locking API, which we could then handle similar to how we handle locked elements for regular server events (patching a clone in the background and applying the updates on unlock). We should also handle those locked elements in phx-remove to allow custom animations when an element is removed.

cc @chrismccord @bcardarella

bcardarella commented 2 hours ago

Thanks @SteffenDE. i'm currently using JS.dispatch to send to an event listener to trigger Motion's animation.

It was suggested to use JS.transition to manage the "locking" but timers in JS are not precise and I'd rather have explicit control from Motion's own complete/cancel callbacks on when to unlock elements.

SteffenDE commented 2 hours ago

For phx-remove it is probably important to lock the whole DOM like JS based transitions do. So that might be a separate feature. Maybe we could just have

liveSocket.transition((done) => {
  // all DOM patching is paused for now,
  // animate and finally call done
  ...
  done()
})

as public API, but element-level locking might be interesting for other things?