Premise
Turbo Drive ships with a progress bar displayed on top of the browser window that you are probably all aware of. By default, it appears when a Turbo Drive visit is taking longer than a specific timeout. In today’s fun little experiment, we’ll look at how we can re-use it for our own purposes.
Starting Point
On the page you’ll find a “Start!” button. I’ve written a small server side script that upon POST submit starts an interval that opens a websocket and transmits fake progress data in lieu of a real, long-running process:
https://stackblitz.com/edit/turbo-drive-progress-bar?file=index.js%3AL30,app.js
Note: You can only transmit specified data types such as strings and certain binary types, i.e. you have to (de)serialize JSON (see the docs)
Challenge
- Write the websocket handler code to update the Turbo Progress Bar programmatically:
Hint: Look at your window.Turbo.navigator object for clues!
- Can you come up with a way to enable/disable the behavior dynamically?
Caveats
- You might have to restart the node server while testing if the websocket doesn’t connect. You can do this easily in the Stackblitz terminal:
Teaser
- Personally I wouldn’t hijack the Turbo Progress bar for tasks other than navigation, because it would result in bad UX. However, certain user actions in the “extended navigation space” such as filtering a large dataset that takes some time, could be a place to provide some feedback that a background process is running. How would you approach implementing this in an app of yours?
