From 84ef5dd4fa305ab9d652a6b7e0d0b9c8c2d392e9 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 7 Oct 2024 04:37:07 -0700
Subject: [PATCH] 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  |  9 +++------
 static/themes/default/css/main.css | 13 +++++++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/plinth/templates/first_setup.html b/plinth/templates/first_setup.html
index 32bb90b75..d30655b88 100644
--- a/plinth/templates/first_setup.html
+++ b/plinth/templates/first_setup.html
@@ -19,12 +19,9 @@ no-brand
   </div>
 
   {% if is_first_setup_running %}
-    <div class="alert alert-warning" role="alert">
-      {% blocktrans trimmed %}
-        Please wait for {{ box_name }} to finish installation.
-        You can start using your {{ box_name }} once it is done.
-      {% endblocktrans %}
-    </div>
+    <p class="firstboot-spinner">
+      <span class="fa fa-refresh fa-spin fa-4x fa-pull-left processing"></span>
+    </p>
   {% endif %}
 
 {% endblock %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index b8aecfe08..a20a20398 100644
--- a/static/themes/default/css/main.css
+++ b/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;