In this lesson, when a user submits the form, we are going to indicate if the form is being processed to give the user some feedback to have a more pleasant user experience.
Before submit:
Right after the form is submitted and the client waits for a response:
Create a new component src/components/IconSpinner.jsx with the following content...
Besides Julian's approach, there's still another way to emulate delay in operations, but for client-side (in an async function): Awaiting a Promise that resolves in a setTimeout callback.
async function register(data) {
setErrors({})
setLoading(true)
// delay of at least 5 seconds before registration
await new Promise(resolve => setTimeout(resolve, 5000));
return axios.post('auth/register', data)
.then(() => {
navigate(route('vehicles.index'))
})
.catch(error => {
if (error.response.status === 422) {
setErrors(error.response.data.errors)
}
})
.finally(() => setLoading(false))
}
Another way to see all your loading state is using the the dev tools of your browser in my case Chrome. Let me describe how it works.
This way you'll simulate an slow connection and you can see your loading states into your application.
When you finish, put again No throtting.