disable and add spinner to stop button when clicked

protected/templates/partials/timer.php

@@ -153,11 +153,19 @@ class="btn btn-success btn-spinner" type="submit"
 		</ul>
 	</div>
 	<?php endif; ?>
-	<form action="/stop-time" method="POST" data-controller="ajax-form" data-action="ajax-form#submit">
+	<form action="/stop-time" method="POST" data-controller="ajax-form stop-timer" data-action="ajax-form#submit">
 		<input type="text" name="csrf" id="csrf_stop_timer" value="<?php echo $CSRF; ?>" hidden>
 		<div class="form-group">
-			<input type="submit" value="Stop" class="btn btn-danger"
-			<?php echo $v_current_log ? ' ' : 'disabled' ?>>
+			<button 
+				type="submit"
+				class="btn btn-danger"
+				<?php echo $v_current_log ? ' ' : 'disabled' ?>
+				data-target="stop-timer.stop"
+				data-action="stop-timer#stopped"
+			>
+			<span data-target="stop-timer.spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
+				Stop
+			</button>
 		</div>
 	</form>
 	<?php endif; ?>

public/assets/js/app.js

@@ -6,12 +6,14 @@ axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
 
 import TimerController from './controllers/timer_controller';
 import StartNewController from './controllers/start_new_controller';
+import StopTimerController from './controllers/stop_timer_controller';
 import FragmentLoaderController from './controllers/fragment_loader_controller';
 import AjaxFormController from './controllers/ajax_form_controller';
 
 const application = Application.start();
 application.register('timer', TimerController);
 application.register('start-new', StartNewController);
+application.register('stop-timer', StopTimerController);
 application.register('fragment-loader', FragmentLoaderController);
 application.register('ajax-form', AjaxFormController);
 

public/assets/js/controllers/stop_timer_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ['spinner', 'stop'];
+
+  stopped() {
+    this.stopTarget.disabled = true;
+    this.spinnerTarget.classList.remove('d-none');
+  }
+}