diff --git a/public/js/app.js b/public/js/app.js
index bceb5ca1..f7966366 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -168,6 +168,20 @@ var profiles = function ($, undefined) {
     }
   };
 
+  /**
+   * Display spinner animation and disable form submit button
+   *
+   * @param {HTMLElement} form that gets submitted 
+   */
+  var wait_when_submitting = function wait_when_submitting(form) {
+    elem = form.querySelector('button[type=submit]');
+    elem_text = elem.innerHTML.replace(/<i[^>]*>(.*?)<\/i>/g, '');
+    elem.innerHTML = "<i class=\"fas fa-spinner fa-spin fa-fw\"></i> ".concat(elem_text);
+    elem.classList.add('btn-primary', 'disabled');
+    elem.classList.remove('btn-light', 'btn-dark', 'btn-secondary', 'btn-info', 'btn-success', 'btn-warning', 'btn-danger');
+    elem.disabled = true;
+  };
+
   /**
    * Adds a new item input row
    *
@@ -558,7 +572,8 @@ var profiles = function ($, undefined) {
     registerProfilePickers: registerProfilePickers,
     toast: toast,
     toggle_class: toggle_class,
-    toggle_show: toggle_show
+    toggle_show: toggle_show,
+    wait_when_submitting: wait_when_submitting
   };
 }(jQuery);
 window.profiles = profiles;
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 5c378da8..82acfc21 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=d6cc6e82bb4e678d3a96d87b3c38835c",
+    "/js/app.js": "/js/app.js?id=9dc35e8177d13dc48b6a5c2515bf88b0",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
     "/css/app.css": "/css/app.css?id=54db96a1c960aab96ee5b38d5cbbf2f1",
     "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880"
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 73a0aa9a..3305d8c2 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -119,6 +119,22 @@ var profiles = (function ($, undefined) {
         }
     }
 
+    /**
+     * Display spinner animation and disable form submit button
+     *
+     * @param {HTMLElement} form that gets submitted 
+     */
+    const wait_when_submitting = function(form) {
+        elem = form.querySelector('button[type=submit]');
+
+        elem_text = elem.innerHTML.replace(/<i[^>]*>(.*?)<\/i>/g, '');
+        elem.innerHTML = `<i class="fas fa-spinner fa-spin fa-fw"></i> ${elem_text}`;
+
+        elem.classList.add('btn-primary', 'disabled');
+        elem.classList.remove('btn-light', 'btn-dark', 'btn-secondary', 'btn-info', 'btn-success', 'btn-warning', 'btn-danger');
+        elem.disabled = true;
+    }
+
     /**
      * Adds a new item input row
      *
@@ -496,6 +512,7 @@ var profiles = (function ($, undefined) {
         toast: toast,
         toggle_class: toggle_class,
         toggle_show: toggle_show,
+        wait_when_submitting : wait_when_submitting,
     };
 
 })(jQuery);
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index faa76665..032eae0b 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -25,7 +25,7 @@
                         </div>
                     @endif
 
-                    <form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
+                    <form id="login-form" class="form-horizontal" role="form" method="POST" action="{{ route('login')}}" data-toggle="wait-on-submit">
                         <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
                         <div class="form-group row justify-content-center">
@@ -79,12 +79,14 @@
 
 @section('scripts')
 <script>
-$(document).ready(function() {
+$(function() {
     // focus the name field if it's empty
     $username = $('#name');
     if (! $username.val()) {
         $username.focus();
     }
+
+    $('form[data-toggle=wait-on-submit]').on('submit', (e) => profiles.wait_when_submitting(e.currentTarget));
 });
 </script>
 @endsection