In this episode, we focus on making our form feel much more interactive and user-friendly after a successful post. We start by noticing that, by default, nothing much happens visually when a form is posted. Of course, under the hood, things are working, but it would be nice for the user to actually see some feedback.
We explore the various callbacks available for the form—such as onSuccess
, onCancel
, onError
, and onFinish
—but we zero in on onSuccess
for now. The first improvement we make is to automatically reset the form after a successful post, clearing out any values the user entered. This makes it ready for the next message without needing a manual refresh.
Next, we talk about scroll position. Sometimes, when you post a form that's down the page, the default behavior jumps you right back to the top, which can be really jarring. We demonstrate this by setting an exaggerated height on the container, then show how you can use the preserveScroll
option so the user's scroll position isn't lost after posting the form. This way, the experience feels a lot more like a real app, where things stay where you left them, instead of blinking back to the top every time you interact.
We wrap up the episode by cleaning up our demo and preview what's coming next: we'll look at how to output all the posts from the database so that new posts actually show up for everyone to see!