From 1cd29d2372ee4de5761778728aa8d0a4eb1a035d Mon Sep 17 00:00:00 2001
From: Arush <arush.kapoor@juspay.in>
Date: Fri, 20 Sep 2024 11:51:00 +0530
Subject: [PATCH] revert: chunk loading issue - 1 (#623)

---
 src/PaymentElementRenderer.res     | 2 ++
 src/PaymentElementRenderer.resi    | 2 +-
 src/PaymentElementRendererLazy.res | 1 +
 src/RenderPaymentMethods.res       | 4 ++--
 4 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 src/PaymentElementRendererLazy.res

diff --git a/src/PaymentElementRenderer.res b/src/PaymentElementRenderer.res
index 0a8cef4f3..1bc1a9f82 100644
--- a/src/PaymentElementRenderer.res
+++ b/src/PaymentElementRenderer.res
@@ -25,3 +25,5 @@ let make = (
       : <PaymentElement cardProps expiryProps cvcProps paymentType />
   }
 }
+
+let default = make
diff --git a/src/PaymentElementRenderer.resi b/src/PaymentElementRenderer.resi
index c91ffa89a..a52c10213 100644
--- a/src/PaymentElementRenderer.resi
+++ b/src/PaymentElementRenderer.resi
@@ -1,5 +1,5 @@
 @react.component
-let make: (
+let default: (
   ~paymentType: CardThemeType.mode,
   ~cardProps: CardUtils.cardProps,
   ~expiryProps: CardUtils.expiryProps,
diff --git a/src/PaymentElementRendererLazy.res b/src/PaymentElementRendererLazy.res
new file mode 100644
index 000000000..233aafa9d
--- /dev/null
+++ b/src/PaymentElementRendererLazy.res
@@ -0,0 +1 @@
+let make = React.lazy_(() => Js.import(PaymentElementRenderer.default))
diff --git a/src/RenderPaymentMethods.res b/src/RenderPaymentMethods.res
index a5bf5a21f..368e64c5a 100644
--- a/src/RenderPaymentMethods.res
+++ b/src/RenderPaymentMethods.res
@@ -94,8 +94,8 @@ let make = (
                 ? <WalletShimmer />
                 : <PaymentElementShimmer />}
             </RenderIf>}
-            componentName="PaymentElementRenderer">
-            <PaymentElementRenderer paymentType cardProps expiryProps cvcProps />
+            componentName="PaymentElementRendererLazy">
+            <PaymentElementRendererLazy paymentType cardProps expiryProps cvcProps />
           </ReusableReactSuspense>
         | CardNumberElement =>
           <InputField