refactor: react suspense log added (#565)

juspay · Sep 2, 2024 · cc312ec · cc312ec
1 parent 824b492
commit cc312ec
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@semantic-release/changelog": "^6.0.3",
@@ -65,6 +66,7 @@
     "@semantic-release/release-notes-generator": "^14.0.1",
     "autoprefixer": "^10.4.8",
     "babel-loader": "^9.1.3",
+    "babel-plugin-add-react-displayname": "^0.0.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "cz-conventional-changelog": "^3.3.0",

diff --git a/src/Index.res b/src/Index.res
@@ -9,7 +9,7 @@ let app = switch ReactDOM.querySelector("#app") {
     <div className="h-auto flex flex-col ">
       <div className="h-auto flex flex-col">
         <Recoil.RecoilRoot>
-          <ErrorBoundary level=ErrorBoundary.Top>
+          <ErrorBoundary level=ErrorBoundary.Top componentName="App">
             <App />
           </ErrorBoundary>
         </Recoil.RecoilRoot>

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -284,47 +284,47 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     <PaymentShimmer />
   }
   let checkoutEle = {
-    <ErrorBoundary key={selectedOption}>
+    <ErrorBoundary key={selectedOption} componentName="PaymentElement">
       {switch selectedOption->PaymentModeType.paymentMode {
       | Card => <CardPayment cardProps expiryProps cvcProps paymentType />
       | Klarna =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="KlarnaPaymentLazy">
           <KlarnaPaymentLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | ACHTransfer =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="ACHBankTransferLazy">
           <ACHBankTransferLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | SepaTransfer =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="SepaBankTransferLazy">
           <SepaBankTransferLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | BacsTransfer =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BacsBankTransferLazy">
           <BacsBankTransferLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | ACHBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="ACHBankDebitLazy">
           <ACHBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | SepaBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="SepaBankDebitLazy">
           <SepaBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | BacsBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BacsBankDebitLazy">
           <BacsBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | BanContactCard =>
         <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true />
       | BecsBankDebit =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BecsBankDebitLazy">
           <BecsBankDebitLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | Boleto =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="BoletoLazy">
           <BoletoLazy paymentType />
-        </React.Suspense>
+        </ReusableReactSuspense>
       | ApplePay =>
         switch applePayToken {
         | ApplePayTokenOptional(optToken) =>
@@ -350,9 +350,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
           }}
         </SessionPaymentWrapper>
       | _ =>
-        <React.Suspense fallback={loader()}>
+        <ReusableReactSuspense loaderComponent={loader()} componentName="PaymentMethodsWrapperLazy">
           <PaymentMethodsWrapperLazy paymentType paymentMethodName=selectedOption />
-        </React.Suspense>
+        </ReusableReactSuspense>
       }}
     </ErrorBoundary>
   }
@@ -402,7 +402,10 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       condition={(paymentOptions->Array.length > 0 || walletOptions->Array.length > 0) &&
         showFields}>
       <div className="flex flex-col place-items-center">
-        <ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
+        <ErrorBoundary
+          key="payment_request_buttons_all"
+          level={ErrorBoundary.RequestButton}
+          componentName="PaymentRequestButtonElement">
           <PaymentRequestButtonElement sessions walletOptions paymentType />
         </ErrorBoundary>
         <RenderIf

diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
@@ -65,8 +65,13 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
     {walletOptions
     ->Array.mapWithIndex((item, i) => {
       <ErrorBoundary
-        level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}>
-        <React.Suspense fallback={<WalletShimmer />} key={i->Int.toString}>
+        level={ErrorBoundary.RequestButton}
+        key={`${item}-${i->Int.toString}-request-button`}
+        componentName="PaymentRequestButtonElement">
+        <ReusableReactSuspense
+          loaderComponent={<WalletShimmer />}
+          componentName="PaymentRequestButtonElement"
+          key={i->Int.toString}>
           {switch clientSecret {
           | Some(_) =>
             switch item->paymentMode {
@@ -123,7 +128,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
             }
           | None => React.null
           }}
-        </React.Suspense>
+        </ReusableReactSuspense>
       </ErrorBoundary>
     })
     ->React.array}

diff --git a/src/RenderPaymentMethods.res b/src/RenderPaymentMethods.res
@@ -72,28 +72,30 @@ let make = (
       <div className="w-full font-medium">
         {switch paymentType {
         | Card =>
-          <React.Suspense
-            fallback={<RenderIf condition={showLoader}>
+          <ReusableReactSuspense
+            loaderComponent={<RenderIf condition={showLoader}>
               <CardElementShimmer />
-            </RenderIf>}>
+            </RenderIf>}
+            componentName="SingleLineCardPaymentLazy">
             <SingleLineCardPaymentLazy
               paymentType cardProps expiryProps cvcProps zipProps handleElementFocus isFocus
             />
-          </React.Suspense>
+          </ReusableReactSuspense>
         | GooglePayElement
         | PayPalElement
         | ApplePayElement
         | KlarnaElement
         | ExpressCheckoutElement
         | Payment =>
-          <React.Suspense
-            fallback={<RenderIf condition={showLoader}>
+          <ReusableReactSuspense
+            loaderComponent={<RenderIf condition={showLoader}>
               {paymentType->Utils.getIsWalletElementPaymentType
                 ? <WalletShimmer />
                 : <PaymentElementShimmer />}
-            </RenderIf>}>
+            </RenderIf>}
+            componentName="PaymentElementRendererLazy">
             <PaymentElementRendererLazy paymentType cardProps expiryProps cvcProps />
-          </React.Suspense>
+          </ReusableReactSuspense>
         | CardNumberElement =>
           <InputField
             isValid=isCardValid
@@ -144,12 +146,13 @@ let make = (
             isFocus
           />
         | PaymentMethodsManagement =>
-          <React.Suspense
-            fallback={<RenderIf condition={showLoader}>
+          <ReusableReactSuspense
+            loaderComponent={<RenderIf condition={showLoader}>
               <PaymentElementShimmer />
-            </RenderIf>}>
+            </RenderIf>}
+            componentName="PaymentManagementLazy">
             <PaymentManagementLazy />
-          </React.Suspense>
+          </ReusableReactSuspense>
         | PaymentMethodCollectElement
         | NONE => React.null
         }}

diff --git a/src/WalletElement.res b/src/WalletElement.res
@@ -33,7 +33,10 @@ let make = (~paymentType) => {
 
   <RenderIf condition={walletOptions->Array.length > 0}>
     <div className="flex flex-col place-items-center">
-      <ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
+      <ErrorBoundary
+        key="payment_request_buttons_all"
+        level={ErrorBoundary.RequestButton}
+        componentName="WalletElement">
         <PaymentRequestButtonElement sessions walletOptions paymentType />
       </ErrorBoundary>
     </div>