From ababf330bc6a22793f9e66e92ccff91729f2dd2f Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Mon, 14 Sep 2026 15:24:52 +0200
Subject: [PATCH] Show metadata transfer apply progress

---
 tests/test_image_metadata_transfer.mjs            | 14 ++++++++++++++
 web/css/resolver-main.css                         | 12 ++++++++++++
 web/resolver/views/tabs_image_metadata_methods.js |  6 ++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/tests/test_image_metadata_transfer.mjs b/tests/test_image_metadata_transfer.mjs
index f04a802..dc376f4 100644
--- a/tests/test_image_metadata_transfer.mjs
+++ b/tests/test_image_metadata_transfer.mjs
@@ -200,6 +200,20 @@ test('metadata transfer refresh updates only the transfer panel when it is mount
   assert.equal(tooltipBindCount, 1);
 });
 
+test('metadata transfer shows a spinner while applying', () => {
+  const context = createTransferContext();
+  const state = createTransferState([
+    { category: 'text_encoders', original_path: 'imported.safetensors' },
+  ]);
+  state.transfer.applying = true;
+
+  const html = context.renderMetadataTransferPanel(state);
+
+  assert.match(html, /aria-busy="true"/);
+  assert.match(html, /class="mr-image-transfer-action-spinner" aria-hidden="true"/);
+  assert.match(html, /<span>Applying\.\.\.<\/span>/);
+});
+
 test('metadata transfer exposes Undo transfer while the post-transfer workflow is unchanged', () => {
   const context = createTransferContext();
   const state = createTransferState([
diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css
index 1dcae0c..148796a 100644
--- a/web/css/resolver-main.css
+++ b/web/css/resolver-main.css
@@ -5305,6 +5305,18 @@ button.mr-info-link:disabled {
     border-top: 1px solid var(--mr-border);
 }
 
+.mr-image-transfer-action-spinner {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 12px;
+    height: 12px;
+    flex: 0 0 12px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: mr-image-inspector-spin 700ms linear infinite;
+}
+
 .mr-image-transfer-empty {
     margin: var(--mr-spacing-8) 0;
     color: var(--mr-text-muted);
diff --git a/web/resolver/views/tabs_image_metadata_methods.js b/web/resolver/views/tabs_image_metadata_methods.js
index ae7f267..65a07d4 100644
--- a/web/resolver/views/tabs_image_metadata_methods.js
+++ b/web/resolver/views/tabs_image_metadata_methods.js
@@ -1474,8 +1474,10 @@ export const imageMetadataMethods = {
                 <div class="mr-image-transfer-category-list">${targetRows}</div>
                 <div class="mr-image-transfer-actions">
                     <span class="mr-image-transfer-selection-count">${this.escapeHtml(selectionSourceText)} · ${selectedTargetCount} selected node${selectedTargetCount === 1 ? '' : 's'}</span>
-                    <button type="button" class="mr-btn mr-btn-primary mr-btn-sm" data-image-inspector-action="apply-transfer" ${applyDisabled ? 'disabled' : ''}>
-                        ${transfer.applying ? 'Applying...' : transfer.undoing ? 'Undoing...' : 'Apply transfer'}
+                    <button type="button" class="mr-btn mr-btn-primary mr-btn-sm" data-image-inspector-action="apply-transfer" ${applyDisabled ? 'disabled' : ''} aria-busy="${transfer.applying ? 'true' : 'false'}">
+                        ${transfer.applying
+                            ? '<span class="mr-image-transfer-action-spinner" aria-hidden="true"></span><span>Applying...</span>'
+                            : transfer.undoing ? 'Undoing...' : 'Apply transfer'}
                     </button>
                 </div>
             </section>