fix: added suspense and error boundary for apple pay and google pay i…

…n tabs (#632) Co-authored-by: Shiva Nandan <[email protected]>
juspay · Sep 20, 2024 · 209f8e9 · 209f8e9
1 parent 666411d
commit 209f8e9
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -328,24 +328,28 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       | ApplePay =>
         switch applePayToken {
         | ApplePayTokenOptional(optToken) =>
-          <ApplePayLazy sessionObj=optToken walletOptions paymentType />
+          <ReusableReactSuspense loaderComponent={loader()} componentName="ApplePayLazy">
+            <ApplePayLazy sessionObj=optToken walletOptions paymentType />
+          </ReusableReactSuspense>
         | _ => React.null
         }
       | GooglePay =>
         <SessionPaymentWrapper type_={Wallet}>
           {switch gPayToken {
           | OtherTokenOptional(optToken) =>
-            switch googlePayThirdPartyToken {
-            | GooglePayThirdPartyTokenOptional(googlePayThirdPartyOptToken) =>
-              <GPayLazy
-                sessionObj=optToken
-                thirdPartySessionObj=googlePayThirdPartyOptToken
-                walletOptions
-                paymentType
-              />
-            | _ =>
-              <GPayLazy sessionObj=optToken thirdPartySessionObj=None walletOptions paymentType />
-            }
+            <ReusableReactSuspense loaderComponent={loader()} componentName="GPayLazy">
+              {switch googlePayThirdPartyToken {
+              | GooglePayThirdPartyTokenOptional(googlePayThirdPartyOptToken) =>
+                <GPayLazy
+                  sessionObj=optToken
+                  thirdPartySessionObj=googlePayThirdPartyOptToken
+                  walletOptions
+                  paymentType
+                />
+              | _ =>
+                <GPayLazy sessionObj=optToken thirdPartySessionObj=None walletOptions paymentType />
+              }}
+            </ReusableReactSuspense>
           | _ => React.null
           }}
         </SessionPaymentWrapper>