From 1c19ba68e3093f34748767876fb843e5e798dbf9 Mon Sep 17 00:00:00 2001
From: ishikawa999 <remember929@gmail.com>
Date: Thu, 3 Jul 2025 07:27:10 +0000
Subject: [PATCH 1/5] Replace loading and hourglass icons with SVG versions on
 attachment upload

---
 app/assets/images/icons.svg            |  9 +++++++++
 app/assets/javascripts/attachments.js  |  6 ++++++
 app/assets/stylesheets/application.css | 27 +++++++++++++-------------
 app/views/attachments/_form.html.erb   |  2 ++
 config/icon_source.yml                 |  6 +++++-
 5 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg
index 6283537ce..f100919e3 100644
--- a/app/assets/images/icons.svg
+++ b/app/assets/images/icons.svg
@@ -228,6 +228,12 @@
       <path d="M12 8l0 4l2 2"/>
       <path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--hourglass">
+      <path d="M6.5 7h11"/>
+      <path d="M6.5 17h11"/>
+      <path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z"/>
+      <path d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--image-gif">
       <path d="M14 3v4a1 1 0 0 0 1 1h4"/>
       <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/>
@@ -301,6 +307,9 @@
       <path d="M5 12l0 .01"/>
       <path d="M5 18l0 .01"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--loader">
+      <path d="M12 3a9 9 0 1 0 9 9"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--lock">
       <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"/>
       <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
diff --git a/app/assets/javascripts/attachments.js b/app/assets/javascripts/attachments.js
index 4c74b2d74..0d823a63f 100644
--- a/app/assets/javascripts/attachments.js
+++ b/app/assets/javascripts/attachments.js
@@ -45,10 +45,13 @@ function addFile(inputEl, file, eagerUpload) {
 addFile.nextAttachmentId = 1;
 
 function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
+  let attachmentIcon = $(fileSpan).find('svg.svg-attachment');
 
   function onLoadstart(e) {
     fileSpan.removeClass('ajax-waiting');
     fileSpan.addClass('ajax-loading');
+    attachmentIcon.addClass('svg-loader');
+    updateSVGIcon(attachmentIcon[0], 'loader')
     $('input:submit', $(this).parents('form')).attr('disabled', 'disabled');
   }
 
@@ -76,6 +79,8 @@ function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
       }).always(function() {
         ajaxUpload.uploading--;
         fileSpan.removeClass('ajax-loading');
+        attachmentIcon.removeClass('svg-loader');
+        updateSVGIcon(attachmentIcon[0], 'attachment');
         var form = fileSpan.parents('form');
         if (form.queue('upload').length == 0 && ajaxUpload.uploading == 0) {
           $('input:submit', form).removeAttr('disabled');
@@ -87,6 +92,7 @@ function ajaxUpload(file, attachmentId, fileSpan, inputEl) {
   var progressSpan = $('<div>').insertAfter(fileSpan.find('input.filename'));
   progressSpan.progressbar();
   fileSpan.addClass('ajax-waiting');
+  updateSVGIcon(attachmentIcon[0], 'hourglass');
 
   var maxSyncUpload = $(inputEl).data('max-concurrent-uploads');
 
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 37713c984..91217f5b5 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1166,20 +1166,6 @@ span.required {color: #bb0000;}
   padding-left: 3px;
   padding-right: 0;
 }
-.attachments_fields .ajax-waiting {
-  padding-left: 16px;
-  background:url(/hourglass-empty.svg) no-repeat 0px 50%;
-}
-.attachments_fields .ajax-waiting .svg-attachment {
-  display: none;
-}
-.attachments_fields .ajax-loading {
-  padding-left: 16px;
-  background: url(/loading.gif) no-repeat 0px 50%;
-}
-.attachments_fields .ajax-loading .svg-attachment {
-  display: none;
-}
 
 a.remove-upload:hover {text-decoration:none !important;}
 .existing-attachment.deleted .filename {text-decoration:line-through; color:#999 !important;}
@@ -2109,6 +2095,19 @@ span.icon-label {
 
 .sort-handle.ajax-loading { background-image: url(/loading.gif); }
 tr.ui-sortable-helper { border:1px solid #e4e4e4; }
+svg.svg-loader {
+  animation: spin 1s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 .contextual>*:not(:first-child), .buttons>.icon:not(:first-child), .contextual .journal-actions>*:not(:first-child) { margin-left: 5px; }
 
diff --git a/app/views/attachments/_form.html.erb b/app/views/attachments/_form.html.erb
index e5b10fb55..11c3ebf76 100644
--- a/app/views/attachments/_form.html.erb
+++ b/app/views/attachments/_form.html.erb
@@ -10,6 +10,8 @@
   <span class="attachments_icons hidden">
     <%= sprite_icon('del', icon_only: true, css_class: 'svg-del') %>
     <%= sprite_icon('attachment', icon_only: true, size: 16, css_class: 'svg-attachment') %>
+    <%= sprite_icon('loader', icon_only: true, size: 16, css_class: 'svg-loader') %>
+    <%= sprite_icon('hourglass', icon_only: true, size: 16, css_class: 'svg-hourglass') %>
   </span>
   <span class="attachments_fields">
   <% if saved_attachments.present? %>
diff --git a/config/icon_source.yml b/config/icon_source.yml
index 64f0a1d8c..27f9e4e46 100644
--- a/config/icon_source.yml
+++ b/config/icon_source.yml
@@ -235,4 +235,8 @@
   svg: message-report
 - name: quote-filled
   svg: quote
-  style: filled
\ No newline at end of file
+  style: filled
+- name: loader
+  svg: loader-2
+- name: hourglass
+  svg: hourglass
\ No newline at end of file
-- 
2.49.0