Pull spinner code into own file spinner.js.

For the purposes of editor.js this does not bring much improvement,
but now I can easily make spinners for other things.

frontends/etiquette_flask/static/js/editor.js

@@ -60,7 +60,7 @@ function Editor(elements, on_open, on_save, on_cancel)
 
     this.hide_spinner = function()
     {
-        this.spinner.classList.add("hidden");
+        this.spinner.hide();
     };
 
     this.open = function()
@@ -115,10 +115,10 @@ function Editor(elements, on_open, on_save, on_cancel)
         this.error_message.classList.remove("hidden");
     };
 
-    this.show_spinner = function()
+    this.show_spinner = function(delay)
     {
         this.hide_error();
-        this.spinner.classList.remove("hidden");
+        this.spinner.show(delay);
     };
 
     this.display_elements = [];
@@ -245,11 +245,12 @@ function Editor(elements, on_open, on_save, on_cancel)
     this.error_message.classList.add("hidden");
     toolbox.appendChild(this.error_message);
 
-    this.spinner = document.createElement("span");
+    spinner_element = document.createElement("span");
-    this.spinner.innerText = "Submitting...";
+    spinner_element.innerText = "Submitting...";
-    this.spinner.classList.add("editor_spinner");
+    spinner_element.classList.add("editor_spinner");
-    this.spinner.classList.add("hidden");
+    spinner_element.classList.add("hidden");
-    toolbox.appendChild(this.spinner);
+    this.spinner = new spinner.Spinner(spinner_element);
+    toolbox.appendChild(spinner_element);
 
     for (var index = 0; index < this.edit_elements.length; index += 1)
     {

frontends/etiquette_flask/static/js/spinner.js

@@ -0,0 +1,31 @@
+var spinner = {};
+
+spinner.Spinner =
+function Spinner(element)
+{
+    this.show = function(delay)
+    {
+        clearTimeout(this.delayed_showing_timeout);
+        this.delayed_showing_timeout = null;
+
+        if (! delay)
+        {
+            this.element.classList.remove("hidden");
+        }
+        else
+        {
+            this.delayed_showing_timeout = setTimeout(this.show, delay);
+        }
+    }
+
+    this.hide = function()
+    {
+        clearTimeout(this.delayed_showing_timeout);
+        this.delayed_showing_timeout = null;
+
+        this.element.classList.add("hidden");
+    }
+
+    this.delayed_showing_timeout = null;
+    this.element = element;
+}

frontends/etiquette_flask/templates/album.html

@@ -153,6 +153,7 @@ ALBUM_ID = undefined;
     <link rel="stylesheet" href="/static/css/photo_card.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/spinner.js"></script>
     <script src="/static/js/editor.js"></script>
     <script src="/static/js/hotkeys.js"></script>
     <script src="/static/js/photo_clipboard.js"></script>

frontends/etiquette_flask/templates/bookmarks.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/spinner.js"></script>
     <script src="/static/js/editor.js"></script>
 
 <style>

frontends/etiquette_flask/templates/tags.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/static/css/common.css">
     <script src="/static/js/common.js"></script>
     <script src="/static/js/api.js"></script>
+    <script src="/static/js/spinner.js"></script>
     <script src="/static/js/editor.js"></script>
 
 <style>