Jankiness in optimistic ui | Remix | Page 1

olive bough Jul 26, 2023, 9:58 PM

#

I'm trying to hide things optimistically when they get deleted but it seems it's not working. What am I missing?
Here is a sandbox showing the behaviour:
https://codesandbox.io/p/sandbox/kind-benz-fkhhjr

kind-benz-fkhhjr

CodeSandbox is an online editor tailored for web applications.

spring axle Jul 26, 2023, 10:47 PM

#

Remove the redirect and simply return the json response and it should work fine

olive bough Jul 26, 2023, 10:50 PM

#

It seems like the optimistic delete does not work at all in this example. Even after I return a json response

spring axle Jul 26, 2023, 11:21 PM

#

The rest is the logic. For example, you can uncomment out the opacity style on deletion (better yet, since there's multiple actions you can do: fetcher.formData?.get('_action') === 'delete')

olive bough Jul 26, 2023, 11:49 PM

#

But there's only one fetcher per component..
And the opacity was to indicate pending state..but I want to remove it immediately

left gorge Jul 27, 2023, 5:01 PM

#

See how Ryan does it
https://www.youtube.com/watch?v=EdB_nj01C80&t=1s&ab_channel=Remix

YouTube

Remix

Remix Single: Optimistic UI

Instead of adding pending states and busy indicators while we wait for the server to process a mutation, we already know what the UI will look like when its done. Skip the spinners with Optimistic UI!

Learn more at https://remix.run

▶ Play video

#

Ah, I see, let me debug it a bit.

olive bough Jul 27, 2023, 5:42 PM

#

Okay

left gorge Jul 27, 2023, 6:53 PM

#

@olive bough have you tested this locally?

#

Cause I tried it in a local env and not codesandbox, and it seems to be working as intended?

olive bough Jul 27, 2023, 7:01 PM

#

In local env there's some jumping around
https://watch.screencastify.com/v/x5vJ6fArLjBJzUgf2UlN

#Jankiness in optimistic ui