feat: add loading after qr click

app/views/layouts/_read_modal.html.erb

@@ -140,8 +140,62 @@
       opacity: 0.6;
       cursor: not-allowed;
   }
+
+  /* Loading Dot */
+  .processing-indicator {
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+  }
+
+  .processing-dot {
+    width: 10px;
+    height: 10px;
+    background: #2196F3;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out;
+  }
+
+  .processing-dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .processing-dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes bounce {
+    0%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-12px);
+    }
+  }
+
+  #fullpage-loading {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    top: 0; left: 0;
+    width: 100vw; height: 100vh;
+    background: rgba(0, 0, 0, 0.712);
+    align-items: center;
+    justify-content: center;
+  }
 </style>
 
+<div id="fullpage-loading" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
+  <div>
+    <div style="display:flex; gap:10px; justify-content:center;">
+      <div class="processing-dot"></div>
+      <div class="processing-dot"></div>
+      <div class="processing-dot"></div>
+    </div>
+    <div style="color:white; text-align:center; margin-top:1rem; font-size:1.2rem;">Please Wait...</div>
+  </div>
+</div>
+
 <div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
     <div class="modal-dialog read-dialog" role="document">
         <div class="modal-content">
@@ -174,6 +228,11 @@
               <img src="/image/mmqr.webp" width="100" height="100" />
           </div>
           <div class="payment-label text-center">Click here to pay with MMQR</div>
+            <div class="processing-indicator" style="display:none; margin: 1rem 0;">
+              <div class="processing-dot"></div>
+              <div class="processing-dot"></div>
+              <div class="processing-dot"></div>
+            </div>
         </div>
 
         <div class="text-center text-bold text-muted">
@@ -223,6 +282,11 @@ document.addEventListener('DOMContentLoaded', function () {
     const disabledNfcCard = document.querySelector('.payment-card.disabled');
 
     document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
+      document.getElementById('fullpage-loading').style.display = 'flex';
+
+      setTimeout(function() {
+        document.getElementById('fullpage-loading').style.display = 'none';
+      }, 5000);
       initDynamicQrPay();
     });