From fd3b84e36935b5898e1ff5f5c6dca65a640340bf Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 2 Oct 2025 17:44:38 +0200
Subject: [PATCH] Handle loading message with spinner

---
 customize.dist/loading.js                     |  1 +
 customize.dist/src/less2/include/loading.less |  4 ++++
 www/common/common-interface.js                | 11 ++++-------
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/customize.dist/loading.js b/customize.dist/loading.js
index d7e3849f9..3d6ac1c87 100644
--- a/customize.dist/loading.js
+++ b/customize.dist/loading.js
@@ -22,6 +22,7 @@ define([
         <div class="cp-loading-progress-list"></div>
         <div class="cp-loading-progress-container"></div>
     </div>
+    <div id="cp-loading-spinner-message"></div>
     <div class="cp-loading-spinner-container">
         <div class="cp-spinner-main"></div>
     </div>
diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less
index 5a5bb6ec8..9be7b0682 100644
--- a/customize.dist/src/less2/include/loading.less
+++ b/customize.dist/src/less2/include/loading.less
@@ -102,6 +102,10 @@
     @media screen and (max-height: 600px) {
         font-size: 16px !important;
     }
+
+    #cp-loading-spinner-message {
+        color: @cp_loading-color;
+    }
     #cp-loading-message {
         background: @cp_loading-msg-bg;
         padding: 1rem;
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index eec050393..31977c383 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -1083,11 +1083,11 @@ define([
             }
             // Add loading text
             const $message = $('#' + LOADING).find('#cp-loading-message');
+            const $spinnerMessage = $('#' + LOADING).find('#cp-loading-spinner-message').hide();
             $message.removeClass('cp-error-message cp-error-message-alt');
+            $message.hide().text('');
             if (loadingText) {
-                $message.show().text(loadingText);
-            } else {
-                $message.hide().text('');
+                $spinnerMessage.show().text(loadingText);
             }
         };
         if ($('#' + LOADING).length) {
@@ -1133,9 +1133,7 @@ define([
         }
 
         var $loading = $('#' + LOADING);
-        if (!$loading.is(':visible') || $loading.hasClass('cp-loading-hidden')) {
-            UI.addLoadingScreen();
-        }
+        UI.addLoadingScreen();
         // Remove the progress list
         $loading.find('.cp-loading-progress').remove();
         // Hide the spinner
@@ -1145,7 +1143,6 @@ define([
 
         // Add the error message
         var $error = $loading.find('#cp-loading-message').show();
-        $error.removeClass('cp-error-message cp-error-message-alt');
         if (error instanceof Element) {
             $error.html('').append(error);
         } else {