From 56b6d336abca7ac72a83dd2217529d7c41c18e47 Mon Sep 17 00:00:00 2001
From: ishikawa999 <remember929@gmail.com>
Date: Fri, 4 Jul 2025 04:37:21 +0000
Subject: [PATCH 4/5] Replace sort-handle loading icon with SVG

---
 app/assets/javascripts/application-legacy.js | 24 ++++++++++++++++++--
 app/assets/stylesheets/application.css       |  1 -
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/application-legacy.js b/app/assets/javascripts/application-legacy.js
index 9c2b49f1e..c59c80876 100644
--- a/app/assets/javascripts/application-legacy.js
+++ b/app/assets/javascripts/application-legacy.js
@@ -963,6 +963,24 @@ function beforeShowDatePicker(input, inst) {
       firstPosition: 1
     }, options );
 
+    function showReorderLoadingIcon(handle) {
+      const svg = handle.querySelector('svg');
+      if (!svg) return;
+
+      updateSVGIcon(svg, 'loader');
+      svg.classList.add('svg-loader');
+      handle.classList.add('ajax-loading');
+    }
+
+    function restoreReorderIcon(handle) {
+      const svg = handle.querySelector('svg.svg-loader');
+      if (!svg) return;
+
+      updateSVGIcon(svg, 'reorder');
+      svg.classList.remove('svg-loader');
+      handle.classList.remove('ajax-loading');
+    }
+
     return this.sortable($.extend({
       axis: 'y',
       handle: ".sort-handle",
@@ -974,10 +992,12 @@ function beforeShowDatePicker(input, inst) {
       },
       update: function(event, ui) {
         var sortable = $(this);
-        var handle = ui.item.find(".sort-handle").addClass("ajax-loading");
+        var handle = ui.item.find(".sort-handle")
         var url = handle.data("reorder-url");
         var param = handle.data("reorder-param");
         var data = {};
+
+        showReorderLoadingIcon(handle[0]);
         data[param] = {position: ui.item.index() + settings['firstPosition']};
         $.ajax({
           url: url,
@@ -989,7 +1009,7 @@ function beforeShowDatePicker(input, inst) {
             sortable.sortable("cancel");
           },
           complete: function(jqXHR, textStatus, errorThrown){
-            handle.removeClass("ajax-loading");
+            restoreReorderIcon(handle[0]);
           }
         });
       },
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 1738b921d..d32f71516 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2079,7 +2079,6 @@ span.icon-label {
 .icon-file.application-gzip:not(:has(svg)) { background-image: url(/files/zip.png); }
 .icon-copy-link:not(:has(svg)) { background-image: url(/copy_link.png); }
 
-.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;
-- 
2.49.0