Loading state and register form

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.

• Right clik on your browser and fin the option inspect.
• Look for the Network tab
• Go and select No throttling (left to the wifi icon)
• Then select Slow 3G

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.

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))
}