Turbo Drive - Form Activity Indicators

Premise

In this challenge we will take an in-depth look at the lifecycle around Turbo Drive form submissions. We will leverage the several events Turbo emits during a form submission to display an autosave activity indicator:

Starting Point

This challenge’s Stackblitz example displays two input fields, one for “Date of Birth” and one for “Amount”. The form self-submits on every input event on any on the inputs (note that in reality you’d want to debounce this): https://stackblitz.com/edit/turbo-drive-form-activity?file=index.js,index.html,app.js%3AL18

To emulate a slow save, I’ve faked a slow 303 response to a PATCH request here: https://stackblitz.com/edit/turbo-drive-form-activity?file=index.html,app.js,index.js%3AL15-L15

Furthermore, I’ve used turbo:load to emulate a templating engine that just sets all the form values from the URL’s SearchParams: https://stackblitz.com/edit/turbo-drive-form-activity?file=index.js,index.html,app.js%3AL7-L7

Note that in a real-world scenario, you would likely use a Stimulus controller or other mechanic to opt out of the form redirect. However, it is a good way to start grokking the whole Turbo Drive lifecycle a bit deeper.

Challenges

• Use the turbo:submit-start and turbo:submit-end events respectively to display “Saving…” and “Saved” indicators below the form.
• What happens if we don’t disable input fields and change a value during the form submission?
• To solve this, while performing the form submit, all form’s input fields should be disabled. How can we achieve that?

Caveats

• To actually perceive the transition, you might need to add a delay, i.e. setTimeout somewhere.

Teaser

• How could you progressively enhance a form, or even a single button in an app of yours?