AMP: Building Accelerated Mobile Pages

Showing the search status

We can make use of the amp-form-submitting class that AMP adds to the form element to give the user more feedback about what is happening during the search. First we'll create two div elements, one to be displayed before the search, and one to be displayed while the search is being performed:

<div class="main-content before-search">  <h2>Product search</h2>  <p>No results yet</p></div><div class="main-content searching">  <h2>Product search</h2>  <p>Searching...</p></div>

Now it's just a matter of applying CSS styles based on the amp-form-submitting class to show and hide these containers as appropriate:

form.amp-form-submitting .before-search {  display: none;}form .searching {  display: none;}form.amp-form-submitting ...