So how can we make sure
that we give the user some feedback
that the form is being submitted
and that we then redirect the user
once the form submission has been done?
Well, I'll start with redirecting
because that's the easier or quicker part.
And for that we have to do two things.
As a first step,
we should await this store post operation,
because in that store post function, I added a delay
to simulate a slow server,
and therefore this store post function
returns a promise,
which only resolves after one second in the end.
Therefore, I have to await this operation.
And then thereafter, I wanna redirect
and we can redirect with help of the redirect function,
which is imported from the next navigation
package like this.
And make sure that you are importing it from there
and not from anywhere else.
This redirect function can then be called
to redirect the user to some other page,
and you could call that directly
from inside some component function as well.
But here we're calling it from inside that server action.
Redirect then simply takes a string that defines the path
to which you wanna redirect, for example,
to the /feed route.
So that's the first step.
The second step now is that I actually want
to replace these buttons here
with some loading text whilst we're handling
the form submission on the server site.
And to do that, we can use another hook
provided by React.
And yes, it's again, a hook
provided by React, not NextJS.
Specifically, it's a hook provided
by the React dom package actually,
the use form status hook.
Now to use this hook, we need
to create a separate component function,
and I'll actually create that in a separate file,
because it will need to become a client component.
And I don't wanna turn this overall component
into a client component.
So I'll actually add a new component here
in the Components folder.
And I'll name it form-submit.js,
or that's the file name.
I'll name the component form, submit though like this.
And then in there, I want
to use this use form status hook.
So you should import use form status
from React-dom, like this.
And then call this hook here
in the form submit component function.
And this hook will give you a status object
that contains various information about the submission
status of a surrounding form.
So this component which uses this hook, must now be used
inside of a form.
So between those form element tag.
That's required
for this hook to work.
Then here I'll simply return these buttons.
So I'll grab these two buttons here,
and cut them from the new post page component here.
And instead return them here wrapped with a fragment
since we have two sibling elements here.
And now we can
and should use this newly added form submit component here
instead of these buttons.
And as mentioned,
this component, since it uses this use form status hook,
must be used between form tax that's required,
which is the case here.
Now with that though, you would get an error
because as I mentioned,
this use form status hook can now only be used
in a client component.
So in a component
that has this use client directive at the top of the file.
Therefore we should go to this forum submit component
and add use client here.
And with that, the error will go away.
Now, that's not all though,
because at the moment we're not using this hook
and this status, but that's what I'll do next,
because this status object will actually
have a pending prop,
and you can cons lock the entire object to find out
what else is in there.
But most importantly, it has this pending property,
which is a Boolean, so true
or false, which tells us if the surrounding form
is currently being submitted,
and if the surrounding form is being submitted and pending,
therefore is true, I wanna return a paragraph here
where I say creating posts like this,
and otherwise if it's not pending,
I'll return those buttons.
And with that, if we now save that
and reload, we got those buttons here initially,
but now if I, again, enter some data, pick some image,
and click Create Post, you see I got this fallback text,
and then we are redirected to the feed page.
So both features work: the redirection
and the fallback content we're showing here instead
of the buttons, whilst the form is being submitted.
And as you see, this feature can easily be added
with the use form status hook.
The only important thing here
is that it must be in a separate component,
which then must be used
between form elements that's required,
and that separate component must be a client component.