From 8871c1399c74d179bd79985542630688a377a58b Mon Sep 17 00:00:00 2001
From: Suherdy Yacob <suherdy.yacob@mapan.co.id>
Date: Mon, 16 Mar 2026 14:33:45 +0700
Subject: [PATCH] refactor: apply image loading shimmer effect to the container
 element instead of the image itself.

---
 static/src/css/sign_image_field.css | 17 +++++++++++------
 static/src/js/sign_image_upload.js  |  1 +
 static/src/xml/sign_items_image.xml |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/static/src/css/sign_image_field.css b/static/src/css/sign_image_field.css
index fd9cee7..cd0674f 100644
--- a/static/src/css/sign_image_field.css
+++ b/static/src/css/sign_image_field.css
@@ -51,17 +51,22 @@ body div.o_sign_sign_item.o_sign_image_item span.o_placeholder {
     position: relative;
 }
 
-.o_sign_image_loading {
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: o_sign_image_shimmer 1.5s infinite linear;
+.o_sign_image_item.o_sign_image_loading_container {
+    background: #f6f7f8;
+    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
+    background-size: 800px 104px;
+    animation: o_sign_image_shimmer 1.2s forwards infinite linear;
 }
 
 @keyframes o_sign_image_shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
+    0% { background-position: -468px 0; }
+    100% { background-position: 468px 0; }
 }
 
 .o_sign_image_lazy {
     transition: opacity 0.5s ease-in-out;
+}
+
+.o_sign_image_lazy:not(.o_sign_image_loading) {
+    opacity: 1 !important;
 }
\ No newline at end of file
diff --git a/static/src/js/sign_image_upload.js b/static/src/js/sign_image_upload.js
index 646bf9b..b1ea47f 100755
--- a/static/src/js/sign_image_upload.js
+++ b/static/src/js/sign_image_upload.js
@@ -139,6 +139,7 @@ patch(PDFIframe.prototype, {
                 lazyImg.src = lazyImg.dataset.src;
                 lazyImg.onload = () => {
                     lazyImg.classList.remove('o_sign_image_loading');
+                    el.classList.remove('o_sign_image_loading_container');
                     lazyImg.style.opacity = 1;
                 };
             }
diff --git a/static/src/xml/sign_items_image.xml b/static/src/xml/sign_items_image.xml
index 5be2477..12f3c9a 100755
--- a/static/src/xml/sign_items_image.xml
+++ b/static/src/xml/sign_items_image.xml
@@ -5,7 +5,7 @@
             <t t-if="type == 'image'" t-call="sign.imageSignItem"/>
         </xpath>
         <xpath expr="//div[@t-if=&quot;type == 'selection'&quot;]" position="after">
-             <div t-if="type == 'image'" t-att-data-id="id" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item o_sign_image_item" t-att-style="style" t-att-data-value="value" t-att-data-type="'image'" style="text-align:center; display:flex; align-items:center; justify-content:center;">
+             <div t-if="type == 'image'" t-att-data-id="id" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item o_sign_image_item {{value ? 'o_sign_image_loading_container' : ''}}" t-att-style="style" t-att-data-value="value" t-att-data-type="'image'" style="text-align:center; display:flex; align-items:center; justify-content:center;">
                 <input type="file" accept="image/*" class="o_sign_image_upload_input" style="display:none"/>
                 <t t-if="value">
                      <img t-att-data-src="value" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="o_sign_image_lazy o_sign_image_loading" style="max-width:100%; max-height:100%; object-fit:contain; opacity: 0; transition: opacity 0.3s;"/>
@@ -21,7 +21,7 @@
     </t>
 
     <t t-name="sign.imageSignItem">
-         <div t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item o_sign_image_item" t-att-data-id="id" t-att-style="style" t-att-data-type="'image'" style="text-align:center; display:flex; align-items:center; justify-content:center;">
+         <div t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item o_sign_image_item {{value ? 'o_sign_image_loading_container' : ''}}" t-att-data-id="id" t-att-style="style" t-att-data-type="'image'" style="text-align:center; display:flex; align-items:center; justify-content:center;">
             <div class="sign_item_body">
             <t t-if="value">
                 <img t-att-data-src="value" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="o_sign_image_lazy o_sign_image_loading" style="max-width:100%; max-height:100%; object-fit:contain; opacity: 0; transition: opacity 0.3s;"/>