Tony C. Hale

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!

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!