firstboot: Show spinner instead of message during first setup

Fixes #2456.

- Replace the first setup wait message with a spinner. This is sufficient to let
the user know that they have to wait.

- The message does not convey anything more.

Tests:

- Remove /var/lib/plinth/plinth.sqlite3 and start the service. After the service
starts listening visit the web interface and notice that the first setup screen
shows up. The size and position of the spinner are as expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/templates/first_setup.html

@@ -19,12 +19,9 @@ no-brand
   </div>
 
   {% if is_first_setup_running %}
-    <div class="alert alert-warning" role="alert">
+    <p class="firstboot-spinner">
-      {% blocktrans trimmed %}
+      <span class="fa fa-refresh fa-spin fa-4x fa-pull-left processing"></span>
-        Please wait for {{ box_name }} to finish installation.
+    </p>
-        You can start using your {{ box_name }} once it is done.
-      {% endblocktrans %}
-    </div>
   {% endif %}
 
 {% endblock %}

static/themes/default/css/main.css

@@ -636,6 +636,19 @@ a.menu_link_active {
     width: 50%;
 }
 
+
+/*
+ * First setup pages
+ */
+.firstboot-spinner {
+    text-align: center;
+}
+
+.firstboot-spinner span.fa {
+    float: none;
+    margin: auto;
+}
+
 .next-steps {
     list-style: none;
     margin-top: 1.5rem;