From 7d49d0e20b4fcb976ea8884389b5c5bb76684992 Mon Sep 17 00:00:00 2001
From: Lamrani Abdel <lamrani002@gmail.com>
Date: Fri, 15 Mar 2024 18:05:32 +0100
Subject: [PATCH 1/2] NEW annimation for display spinner when waiting response

---
 htdocs/core/class/html.formmail.class.php |  8 +++-
 htdocs/theme/eldy/global.inc.php          | 46 +++++++++++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/htdocs/core/class/html.formmail.class.php b/htdocs/core/class/html.formmail.class.php
index 7557a9d89ce..290c4ffec6d 100644
--- a/htdocs/core/class/html.formmail.class.php
+++ b/htdocs/core/class/html.formmail.class.php
@@ -1454,7 +1454,8 @@ class FormMail extends Form
 		$out .= '<td>';
 		$out .= '<input type="text" class="quatrevingtpercent" id="ai_instructions" name="instruction" placeholder="'.$langs->trans("EnterYourAIPromptHere").'..." />';
 		$out .= '<input id="generate_button" type="button" class="button smallpaddingimp"  value="'.$langs->trans('Generate').'"/>';
-		$out .= '<div id="ai_status_message" class="fieldrequired hideobject" >'.$langs->trans("AIProcessingPleaseWait").'</div>';
+		$out .= '<div id="ai_status_message" class="fieldrequired hideobject marginrightonly" >';
+		$out .= '<i class="loader"></i>'.$langs->trans("AIProcessingPleaseWait").'</div>';
 		$out .= "</td></tr>\n";
 
 		$out .= "<script type='text/javascript'>
@@ -1471,6 +1472,7 @@ class FormMail extends Form
 					var instructions = $('#ai_instructions').val();
 					
 					$('#ai_status_message').show();
+					$('.icon-container .loader').show();
 
 					//editor on readonly
         			if (CKEDITOR.instances.message) {
@@ -1498,7 +1500,9 @@ class FormMail extends Form
 							// remove readonly
 							$('#ai_instructions').val('');
 
-							$('#ai_status_message').hide();
+							setTimeout(function() {
+								$('#ai_status_message').hide();
+							}, 3000);
 						},
 						error: function(xhr, status, error) {
 							alert(error);
diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index 3c87a03153a..39205187292 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -8154,7 +8154,51 @@ table.jPicker {
 	}
 }
 
+/* ============================================================================== */
+/* CSS style for animation ai message                                                   */
+/* ============================================================================== */
+.icon-container {
+  top: calc(50% - 10px);
+}
 
+.loader {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  display: inline-block;
+  animation: around 5.4s infinite;
+}
+
+@keyframes around {
+  0% {
+	transform: rotate(0deg);
+  }
+  100% {
+	transform: rotate(360deg);
+  }
+}
+
+.loader::after, .loader::before {
+  content: '';
+  background: white;
+  position: absolute;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  border-width: 2px;
+  border-color: #333 #333 transparent transparent;
+  border-style: solid;
+  border-radius: 20px;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  animation: around 0.7s ease-in-out infinite;
+}
+
+.loader::after {
+  animation: around 0.7s ease-in-out 0.1s infinite;
+  background: transparent;
+}
 @media only screen and (max-width: 320px)
 {
 	.dropdown dd ul {
@@ -8206,3 +8250,5 @@ div.flot-text .flot-tick-label .tickLabel, .fa-color-unset {
 	color: unset;
 
 }
+
+

From 28e10cb999245a6649c262c461e7079c1b3f18cb Mon Sep 17 00:00:00 2001
From: Lamrani Abdel <lamrani002@gmail.com>
Date: Sat, 16 Mar 2024 01:02:32 +0100
Subject: [PATCH 2/2] Change icon spinner

---
 htdocs/core/class/html.formmail.class.php |  2 +-
 htdocs/theme/eldy/global.inc.php          | 46 -----------------------
 2 files changed, 1 insertion(+), 47 deletions(-)

diff --git a/htdocs/core/class/html.formmail.class.php b/htdocs/core/class/html.formmail.class.php
index 290c4ffec6d..68520d673f2 100644
--- a/htdocs/core/class/html.formmail.class.php
+++ b/htdocs/core/class/html.formmail.class.php
@@ -1455,7 +1455,7 @@ class FormMail extends Form
 		$out .= '<input type="text" class="quatrevingtpercent" id="ai_instructions" name="instruction" placeholder="'.$langs->trans("EnterYourAIPromptHere").'..." />';
 		$out .= '<input id="generate_button" type="button" class="button smallpaddingimp"  value="'.$langs->trans('Generate').'"/>';
 		$out .= '<div id="ai_status_message" class="fieldrequired hideobject marginrightonly" >';
-		$out .= '<i class="loader"></i>'.$langs->trans("AIProcessingPleaseWait").'</div>';
+		$out .= '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'.$langs->trans("AIProcessingPleaseWait").'</div>';
 		$out .= "</td></tr>\n";
 
 		$out .= "<script type='text/javascript'>
diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index 39205187292..15cea59c574 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -8153,52 +8153,6 @@ table.jPicker {
 		margin-top: 30px;
 	}
 }
-
-/* ============================================================================== */
-/* CSS style for animation ai message                                                   */
-/* ============================================================================== */
-.icon-container {
-  top: calc(50% - 10px);
-}
-
-.loader {
-  position: relative;
-  height: 20px;
-  width: 20px;
-  display: inline-block;
-  animation: around 5.4s infinite;
-}
-
-@keyframes around {
-  0% {
-	transform: rotate(0deg);
-  }
-  100% {
-	transform: rotate(360deg);
-  }
-}
-
-.loader::after, .loader::before {
-  content: '';
-  background: white;
-  position: absolute;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  border-width: 2px;
-  border-color: #333 #333 transparent transparent;
-  border-style: solid;
-  border-radius: 20px;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  animation: around 0.7s ease-in-out infinite;
-}
-
-.loader::after {
-  animation: around 0.7s ease-in-out 0.1s infinite;
-  background: transparent;
-}
 @media only screen and (max-width: 320px)
 {
 	.dropdown dd ul {