backups: Add a loader to the restore button to indicate progress

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>

plinth/modules/backups/static/loading_button.js

@@ -0,0 +1,28 @@
+/*
+  This file is part of FreedomBox.
+
+  @licstart  The following is the entire license notice for the
+  JavaScript code in this page.
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+  @licend  The above is the entire license notice
+  for the JavaScript code in this page.
+*/
+
+
+function swapWithLoadingButton() {
+    $("#restore_btn").addClass("sr-only");
+    $("#loading_btn").removeClass("sr-only");
+}

plinth/modules/backups/templates/backups_restore.html

@@ -20,6 +20,7 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load static %}
 
 {% block content %}
   <h2>{{ title }}</h2>
@@ -36,10 +37,17 @@
 
       {{ form|bootstrap }}
 
-      <input type="submit" class="btn btn-primary"
+      <input id="restore_btn" type="submit"
-             value="{% blocktrans trimmed %}
+             class="btn btn-primary"
-                      Restore
+             onclick="swapWithLoadingButton();"
-                    {% endblocktrans %}"/>
+             value="{% trans 'Restore' %}" />
+
+      <button id="loading_btn" class="btn btn-primary sr-only" disabled>
+        <i class="fa fa-spinner fa-pulse fa-fw"></i> {% blocktrans trimmed %}
+          Restoring
+          {% endblocktrans %}
+      </button>
+
       <a title="{% trans 'Abort' %}"
          role="button" class="btn btn-warning"
          href="{% url 'backups:index' %}">
@@ -49,3 +57,8 @@
   </p>
 
 {% endblock %}
+
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'backups/loading_button.js' %}"></script>
+{% endblock %}
+