using action/useSubmission, discern which button submitted the action?
i have a form with a create and a create & new, (the latter just creates the entity without clearing form/redirect/etc.)
the issue is, i don't want to render a loading indicator on both buttons every submission, only the button that created the submission. is there a way to discern which caused the submission? i was thinking an extra param to the function, but it feels a little hacky as the param isn't actually used.
open to any thoughts! thanks
5 Replies
I think you need a boolean for <Show> to determine when it should show a loading indicator?
yea sorry i should've clarified, this isn't a matter of templating ( i already have the show implemented )
the question is writing the condition for when to show.
if i do submission.pending, then it will show load on any submission of that action, no matter the input or when it's invoked
if i do submission.pending && submission.input[0] === input for the data i currently have, both
create and create and new will both show loading during submission pending state
so i need a way to differentiate, using the solid router primitives, basically who the caller of the submission was. the only thing i can think of currently is to have the action take an optional third param called like callsite or something, and pass in a custom key for who's calling it. then i can add that to my check and make sure that appropriate caller is making the action submission, and show the loading indicator at that point
this feels like a suboptimal solution- (outside of the annoying fact that eslint will yell at me for having an unused param), im adding a param to my function to manipulate the primitives i'm using
i could also probably wrap the action in another action for each button with unique names and then differentiate on that, but also seems suboptimalWhat are your action's arguments?
The submission only knows what has been submitted (the inputs) so I think the only way is to provide additional meta data for the input
If you have action args as a single FormData, then add a hidden input to indicate whether it is
&new or not
Or provide the value if it's not FormData but anything else
:Worry_Think:
Or maybe you can just handle the from the onSubmit event of the form element
There will be information about the button within the submit event
event.submitter I guess
Oh, I also wonder if FormData also captures the value of the button if the button name is specified (react router has this behavior but not sure with solid router)
:_Worry_Wow:yea i mean that all makes sense, i just was wondering if there was anything built in to the primitives that i'm missing on how to handle this. it's not that niche of a case. if i have multiple buttons on a page that call the same action with same args, i don't want to show loading indicators on all of them
So I think the submitter pattern works best for this case