From 0206a6f94cbcdafd41e5605993c74ee59536ba9b Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Fri, 7 May 2021 17:33:10 +0200
Subject: [PATCH] introduce spinner during file uploads

---
 htdocs/lib/settings/ImageUpload.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/htdocs/lib/settings/ImageUpload.js b/htdocs/lib/settings/ImageUpload.js
index 30e4c27..29acd8e 100644
--- a/htdocs/lib/settings/ImageUpload.js
+++ b/htdocs/lib/settings/ImageUpload.js
@@ -20,18 +20,22 @@ $.fn.imageUpload = function() {
             $this.removeClass('is-invalid');
         };
         $uploadButton.click(function(){
-            $uploadButton.prop('disabled', true);
             var input = document.createElement('input');
             input.type = 'file';
             input.accept = 'image/jpeg, image/png, image/webp';
 
             input.onchange = function(e) {
+                $uploadButton.prop('disabled', true);
+                var $spinner = $('<span class="spinner-border spinner-border-sm mr-1" role="status"></span>');
+                $uploadButton.prepend($spinner);
+
                 var reader = new FileReader()
                 reader.readAsArrayBuffer(e.target.files[0]);
                 reader.onprogress = function(e) {
                     if (e.loaded > maxSize) {
                         handleError('Maximum file size exceeded');
                         $uploadButton.prop('disabled', false);
+                        $spinner.remove();
                         reader.abort();
                     }
                 };
@@ -39,6 +43,7 @@ $.fn.imageUpload = function() {
                     if (e.loaded > maxSize) {
                         handleError('Maximum file size exceeded');
                         $uploadButton.prop('disabled', false);
+                        $spinner.remove();
                         return;
                     }
                     $.ajax({
@@ -60,6 +65,7 @@ $.fn.imageUpload = function() {
                         }
                     }).always(function(){
                         $uploadButton.prop('disabled', false);
+                        $spinner.remove();
                     });
                 }
             };