Our form is working fine so far, but we can improve on the user experience by having different parts of the form active at different stages.
For example, once a search is underway it would be nice to hide any previous images or error messages, and instead show some kind of indication that the search is 'in progress'. We can do this by making use of switch and case.
The switch element provides a container for a set of cases, only one of which will be active at any one time. We'll see exactly how to select a particular case in a moment, but first add the following mark-up after the submit button:
</xf:submit>
<xf:switch>
<xf:case id="case-start">Start</xf:case>
<xf:case id="case-busy">Busy</xf:case>
<xf:case id="case-done">Done</xf:case>
</xf:switch>
<xf:output ref="instance('inst-rs')/err/@msg">
If you reload your form you will see the word "Start" just below the input control, with "Busy" and "Error" hidden because only one case can be active at a time.