So now that we're able to save meals,
it's time to further enhance the user experience here.
And for example, as you saw before,
it takes quite some time until we are redirected
after adding our data.
Now that will typically be a bit faster in production,
but still, it would be nice to get some feedback
as a user whilst the data is being submitted to see
that everything's fine and a request is on its way.
So it would be nice to, for example,
update this button once we clicked it to tell us
that the request is on its way.
And to do that, we can use another hook provided by React.
Yes, React,
but again, a feature that really only works when using Next.
For that, I'll go back to my share page here
where I have that form.
And here I want to conditionally update this button
and for example,
show the text submitting when the request is on its way.
And we can achieve this by using another special hook
called useFormStatus.
And this hook must be imported,
useFormStatus from react-dom,
so not from React, not from NextJS, but from react-dom.
And this then gives you a status object,
which, for example, has a pending property,
which is true if there is an ongoing request
and false otherwise.
However, if you add that hook,
you'll see that you'll get an error
because this hook requires a client component
in order to work, which makes sense
because it is about updating the client side UI
based on any ongoing requests.
Now therefore, we would have to add use client here
and we could do that, wouldn't be a problem,
everything would work.
But we also might not want
to turn this entire page into a client component
just because we want to conditionally update this button.
In addition, this hook here will actually
only give us the status of a form
if it's inside of that form
for which it should give us the status.
So it must be inside of this form here if we want
to get the submission status of that form,
and with inside this forum, I mean inside of some component
that's inside of that forum.
So it wouldn't work here anyways.
And therefore, I will not add it here,
and therefore remove it,
and instead add a new component,
a new component here in the meals folder
in the components folder,
let's say that could be named meals-form-submit,
or anything like this.
And I'll export a component function here,
which I'll name MealsFormSubmit.
In this file, I'll then import this useFormStatus hook,
and I'll add that client directive,
and then we can get our status here
by calling useFormStatus like this.
Now as mentioned, this status thing here is an object
with various properties,
and therefore, we can actually use object destructuring here
to pull out that one property I am interested in here.
And that's the pending property.
Well and then meals-form-submit should return a button
which says Share Meal.
So what I had on this button here before as well,
but actually it shouldn't always say that.
Instead, I wanna output some conditional content here
and check if pending is truthy, in which case I want
to output the text Submitting,
and otherwise I'll output the text Share Meal.
In addition, I want to disable the button
if we are submitting.
So I'll set the disabled prop to pending,
so that we do disable the button if the surrounding form
is being submitted and we enable it, if that's not the case.
And with that, we can go back to our form
and replace this vanilla button here
with our meals-form-submit button,
this component we just worked on.
With that done, if I reload this page,
I can again enter some data here.
Like this and pick the same image as before.
And if I click Share Meal, you now see this button changes,
and therefore we get a better feedback,
and then after a while, we're redirected,
and we see our new meal here.
So that's better.