AMP: Building Accelerated Mobile Pages

UX improvement - visual feedback on submission

When an XHR form is submitted in AMP, other than disabling the submit button, there is no default indication that something is happening. If the endpoint is slow to respond then the user won't know what's happening. We can improve this.

When a form is submitted, AMP adds the class amp-form-submitting to the form element. We can use this to tweak the UI and display a loading indicator when this class is present.

First, let's add the indicator markup. You can use any kind of loader or spinner you want here, but keep in mind the CSS animation restrictions we mentioned in Chapter 1, Ride the Lightning with AMP. We're using a div element here, added just after the submit button:

<input type="submit" ...