useSubmission pending state resolves on url change?

i have some optimistic ui, with roughly the following structure:

view = "edit" | "read", based on searchParams
data = fetch data from server
editable = copy of data we can write to (what we render)

when the user clicks save => 
    invoke save fn() (which is an action())
    **set view -> "read" (rest of ui is already optimistically set)
  
    if no error thrown (via try)
        await revalidate() // wan't to make sure we have server state befoe confirming success
        toast("good")
    if error thrown (via catch)
        await revalidate() // reset to good state
        toast("bad")

view = "edit" | "read", based on searchParams
data = fetch data from server
editable = copy of data we can write to (what we render)

when the user clicks save => 
    invoke save fn() (which is an action())
    **set view -> "read" (rest of ui is already optimistically set)
  
    if no error thrown (via try)
        await revalidate() // wan't to make sure we have server state befoe confirming success
        toast("good")
    if error thrown (via catch)
        await revalidate() // reset to good state
        toast("bad")

then somewhere else i use

useSubmission(save)

useSubmission(save)

and disable buttons based on

pending

pending

state as i don't want user's editing lists that aren't accurate to server state.

the weird thing is, when i include the logic above with the

**

**

, the useSubmission state basically dies. it returns to undefined, and my buttons are don't disabled

if instead i wait to

set view -> "read"

set view -> "read"

until after i've checked the result of the server call, then the

pending

pending

state works perfectly (which i can't really do, otherwise the illusion of the optimistic ui is gone)

wondering if this is expected, or perhaps i'm doing something wrong? I can post code tomorrow if this doesn't make sense, thanks!

SolidJS•2y ago•

5 replies

jack

useSubmission pending state resolves on url change?

i have some optimistic ui, with roughly the following structure:

view = "edit" | "read", based on searchParams
data = fetch data from server
editable = copy of data we can write to (what we render)

when the user clicks save => 
    invoke save fn() (which is an action())
    **set view -> "read" (rest of ui is already optimistically set)
  
    if no error thrown (via try)
        await revalidate() // wan't to make sure we have server state befoe confirming success
        toast("good")
    if error thrown (via catch)
        await revalidate() // reset to good state
        toast("bad")

view = "edit" | "read", based on searchParams
data = fetch data from server
editable = copy of data we can write to (what we render)

when the user clicks save => 
    invoke save fn() (which is an action())
    **set view -> "read" (rest of ui is already optimistically set)
  
    if no error thrown (via try)
        await revalidate() // wan't to make sure we have server state befoe confirming success
        toast("good")
    if error thrown (via catch)
        await revalidate() // reset to good state
        toast("bad")

then somewhere else i use

useSubmission(save)

useSubmission(save)

and disable buttons based on

pending

pending

state as i don't want user's editing lists that aren't accurate to server state.

the weird thing is, when i include the logic above with the

**

**

, the useSubmission state basically dies. it returns to undefined, and my buttons are don't disabled

if instead i wait to

set view -> "read"

set view -> "read"

until after i've checked the result of the server call, then the

pending

pending

useSubmission pending state resolves on url change?

Similar Threads

useSubmission pending state resolves on url change?

Similar Threads

Similar Threads

Similar Threads