2 files changed, 15 insertions, 9 deletions

diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index 8bb60808..8e117012 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -122,8 +122,8 @@ function populateDictionaries(opts) {
     const dictError = $('#dict-error');
     dictError.hide();
 
-    const dictLaggy = $('#dict-laggy');
-    dictLaggy.show();
+    const dictSpinner = $('#dict-spinner');
+    dictSpinner.show();
 
     database().getDictionaries().then(rows => {
         rows.forEach(row => {
@@ -145,7 +145,7 @@ function populateDictionaries(opts) {
     }).catch(error => {
         dictError.show().find('span').text(error);
     }).then(() => {
-        dictLaggy.hide();
+        dictSpinner.hide();
     });
 }
 
@@ -156,12 +156,17 @@ function onDictionaryDelete() {
     const dictError = $('#dict-error');
     dictError.hide();
 
+    const dictSpinner = $('#dict-spinner');
+    dictSpinner.show();
+
     const dictGroup = dictDelete.closest('.dict-group');
     database().deleteDictionary(dictGroup.data('title')).then(() => {
         dictGroup.slideUp();
     }).catch(error => {
         dictError.show().find('span').text(error);
         dictDelete.prop('disabled', false);
+    }).then(() => {
+        dictSpinner.hide();
     });
 }
 
@@ -172,6 +177,9 @@ function onDictionaryImport() {
     const dictError = $('#dict-error');
     dictError.hide();
 
+    const dictSpinner = $('#dict-spinner');
+    dictSpinner.show();
+
     const progressbar = $('#dict-import-progress');
     progressbar.show();
 
@@ -185,9 +193,10 @@ function onDictionaryImport() {
     }).catch(error => {
         dictError.show().find('span').text(error);
     }).then(() => {
+        dictImport.prop('disabled', false);
         dictUrl.val('');
         progressbar.hide();
-        dictImport.prop('disabled', false);
+        dictSpinner.hide();
     });
 }
 
diff --git a/ext/bg/options.html b/ext/bg/options.html
index a3c66ce3..14f72315 100644
--- a/ext/bg/options.html
+++ b/ext/bg/options.html
@@ -6,7 +6,7 @@
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
         <style>
-            #anki-spinner, #anki-general, #anki-error, #dict-error, #dict-import-progress, #dict-delete-progress, #dict-laggy, #options-advanced {
+            #anki-spinner, #anki-general, #anki-error, #dict-spinner, #dict-import-progress, #dict-delete-progress, #dict-laggy, #options-advanced {
                 display: none;
             }
 
@@ -65,6 +65,7 @@
             <div>
                 <h3>Dictionaries</h3>
 
+                <img src="img/spinner.gif" class="pull-right" id="dict-spinner" alt>
                 <div id="dict-groups"></div>
 
                 <div class="alert alert-danger" id="dict-error">
@@ -72,10 +73,6 @@
                     <span></span>
                 </div>
 
-                <div class="alert alert-warning" id="dict-laggy">
-                    The dictionary database appears to be busy; please wait for currently executing tasks to complete.
-                </div>
-
                 <div class="progress" id="dict-import-progress">
                     <div class="progress-bar progress-bar-striped" style="width: 0%"></div>
                 </div>