From 4c6020535ac2c1c0923a7e9a75a900cb4d25236c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:51:54 +0100
Subject: [PATCH] fix: hide mollie spinners with overflow clip, show static
 placeholder fields while loading

---
 components/checkout/PaymentForm.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 5f85839..061289b 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -162,7 +162,10 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Cardholder name */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div id="mollie-card-holder" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+          <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+            <div id="mollie-card-holder" className={mollieFieldBase} />
+          </div>
+          {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
           {submitted && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
@@ -171,7 +174,10 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div id="mollie-card-number" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+          <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+            <div id="mollie-card-number" className={mollieFieldBase} />
+          </div>
+          {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
           {submitted && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
@@ -181,14 +187,20 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div id="mollie-card-expiry" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+            <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+              <div id="mollie-card-expiry" className={mollieFieldBase} />
+            </div>
+            {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
             {submitted && cardErrors.expiryDate && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div id="mollie-card-cvc" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+            <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+              <div id="mollie-card-cvc" className={mollieFieldBase} />
+            </div>
+            {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
             {submitted && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}