How Do Show Loading Indicator On A Turbo(Stimulus) Form ?
I am learning rails by building a project. I am using the turbo frames for the form.
I would like to add a loading indicator to the submit button just like the one on this forum when you comment on a thread. Has anyone any idea on how I can achieve that ?
Best regards,
Suleiman Nassor
Can't post links but there is a nice example here:
www mikewilson . dev/posts/using-hotwire-with-rails-for-a-spa-like-experience
Hey Suleiman, that's a cool project! Using Turbo Frames for forms is a neat way to keep things snappy. For the loading indicator, I've found success by disabling the button and swapping its text with a spinner inside the turbo:before-stream-render and turbo:after-stream-render events. It's a fun challenge, almost like trying to beat my high score in the Dinosaur Game while waiting for the form to process! Hope that helps get you pointed in the right direction. Good luck!
Hey Suleiman, that's a cool project! I've tackled similar loading indicators with Turbo Frames before. One approach is to use CSS classes to visually change the button on submit. You can initially hide a spinner icon and display it when the form is submitted, while disabling the button. It gives a visual feedback similar to watching a car doing donuts in a Drift Hunters game - a little bit of action while you wait. You can then use the turbo:before-stream-render event to revert the button to its original state after the form is processed. Hope this helps!
Okay, form submissions and loading indicators, always a fun dance! It's funny how a simple visual cue can make such a difference in user experience. Showing progress definitely keeps people from mashing that button repeatedly. Turbo frames are super cool, but sometimes trickier than they appear. Ah, the age-old problem of asynchronous feedback! I remember once, building a checkout page with a clunky API. The order button felt like it did nothing for ages while processing payments. People kept clicking, leading to duplicate orders and a massive headache. I wish slope unblocked back then was as smooth as Turbo now to handle asynchronous processes!.
That's a great idea! Adding a loading indicator enhances user experience. Think about it like mastering Slope Game you wouldn't want to blindly rush into an obstacle. Instead, you anticipate and adjust. Similarly, a visual cue informs users their submission is processing. Perhaps investigate asynchronous JavaScript functions or CSS animations to achieve this effect smoothly.