feat(checkout): CHECKOUT-10399 Redesign payment loaders

packages/core/src/app/payment/PaymentForm.test.tsx

@@ -141,6 +141,44 @@ describe('PaymentForm', () => {
         expect(radios[1]).not.toBeChecked();
     });
 
+    it('does not render the loading overlay while a payment method is initializing in enhancedThemeV1', () => {
+        enhancedThemeV1 = true;
+
+        render(<PaymentFormTest {...defaultProps} isInitializingPayment={true} />);
+
+        expect(screen.queryByTestId('loading-overlay')).not.toBeInTheDocument();
+        expect(screen.getAllByRole('radio')).toHaveLength(2);
+    });
+
+    it('keeps payment methods unselectable while a payment method is initializing in enhancedThemeV1', () => {
+        enhancedThemeV1 = true;
+
+        const onMethodSelect = jest.fn();
+
+        render(
+            <PaymentFormTest
+                {...defaultProps}
+                isInitializingPayment={true}
+                onMethodSelect={onMethodSelect}
+            />,
+        );
+
+        const radios = screen.getAllByRole('radio');
+
+        fireEvent.click(radios[1]);
+
+        expect(onMethodSelect).not.toHaveBeenCalled();
+        expect(radios[1]).not.toBeChecked();
+    });
+
+    it('renders the payment method skeleton for the initializing method in enhancedThemeV1', () => {
+        enhancedThemeV1 = true;
+
+        render(<PaymentFormTest {...defaultProps} isInitializingPayment={true} />);
+
+        expect(screen.getByTestId('payment-method-skeleton')).toBeInTheDocument();
+    });
+
     it('renders terms and conditions field if copy is provided', () => {
         const textAcceptTerms = 'Accept terms';
 

packages/core/src/app/payment/paymentMethod/PaymentMethodList.tsx

@@ -2,8 +2,13 @@ import { type PaymentMethod } from '@bigcommerce/checkout-sdk';
 import { find, noop } from 'lodash';
 import React, { type FunctionComponent, memo, useCallback, useMemo } from 'react';
 
-import { useCheckout, useLocale } from '@bigcommerce/checkout/contexts';
-import { Checklist, ChecklistItem, LoadingOverlay } from '@bigcommerce/checkout/ui';
+import { useCheckout, useLocale, useThemeContext } from '@bigcommerce/checkout/contexts';
+import {
+    Checklist,
+    ChecklistItem,
+    LoadingOverlay,
+    PaymentMethodSkeleton,
+} from '@bigcommerce/checkout/ui';
 
 import { connectFormik, type ConnectFormikProps } from '../../common/form';
 
@@ -47,6 +52,7 @@ const PaymentMethodList: FunctionComponent<
 }) => {
     const { language } = useLocale();
     const { selectedState: config } = useCheckout(({ data }) => data.getConfig());
+    const { enhancedThemeV1 } = useThemeContext();
 
     const chequeMethod = find(methods, { id: 'cheque' });
     const chequeDisabledReason = usePoMethodDisabledReason(chequeMethod);
@@ -81,37 +87,44 @@ const PaymentMethodList: FunctionComponent<
         [methods, onSelect],
     );
 
+    const checklist = (
+        <Checklist
+            defaultSelectedItemId={values.paymentProviderRadio}
+            name="paymentProviderRadio"
+            onSelect={handleSelect}
+        >
+            {methods.map((method) => {
+                const value = getUniquePaymentMethodId(method.id, method.gateway);
+
+                return (
+                    <PaymentMethodListItem
+                        disabledReason={method === chequeMethod ? chequeDisabledReason : undefined}
+                        isEmbedded={isEmbedded}
+                        isInitializingPayment={isInitializingPayment}
+                        isSelected={value === values.paymentProviderRadio}
+                        isUsingMultiShipping={isUsingMultiShipping}
+                        key={value}
+                        method={method}
+                        onUnhandledError={onUnhandledError}
+                        value={value}
+                    />
+                );
+            })}
+        </Checklist>
+    );
+
     return (
         <>
             <div aria-live="assertive" className="is-srOnly" role="status">
                 {titleText}
             </div>
-            <LoadingOverlay isLoading={Boolean(isInitializingPayment)}>
-                <Checklist
-                    defaultSelectedItemId={values.paymentProviderRadio}
-                    name="paymentProviderRadio"
-                    onSelect={handleSelect}
-                >
-                    {methods.map((method) => {
-                        const value = getUniquePaymentMethodId(method.id, method.gateway);
-
-                        return (
-                            <PaymentMethodListItem
-                                disabledReason={
-                                    method === chequeMethod ? chequeDisabledReason : undefined
-                                }
-                                isEmbedded={isEmbedded}
-                                isInitializingPayment={isInitializingPayment}
-                                isUsingMultiShipping={isUsingMultiShipping}
-                                key={value}
-                                method={method}
-                                onUnhandledError={onUnhandledError}
-                                value={value}
-                            />
-                        );
-                    })}
-                </Checklist>
-            </LoadingOverlay>
+            {enhancedThemeV1 ? (
+                checklist
+            ) : (
+                <LoadingOverlay isLoading={Boolean(isInitializingPayment)}>
+                    {checklist}
+                </LoadingOverlay>
+            )}
         </>
     );
 };
@@ -120,6 +133,7 @@ interface PaymentMethodListItemProps {
     disabledReason?: PoDisabledReason;
     isEmbedded?: boolean;
     isInitializingPayment?: boolean;
+    isSelected: boolean;
     isUsingMultiShipping?: boolean;
     method: PaymentMethod;
     value: string;
@@ -130,21 +144,47 @@ const PaymentMethodListItem: FunctionComponent<PaymentMethodListItemProps> = ({
     disabledReason,
     isEmbedded,
     isInitializingPayment,
+    isSelected,
     isUsingMultiShipping,
     method,
     onUnhandledError,
     value,
 }) => {
+    const { enhancedThemeV1 } = useThemeContext();
+    const isCustomChecklistItem = Boolean(method.initializationData?.isCustomChecklistItem);
+
     const renderPaymentMethod = useMemo(() => {
-        return (
+        const paymentMethod = (
             <PaymentMethodV2
                 isEmbedded={isEmbedded}
                 isUsingMultiShipping={isUsingMultiShipping}
                 method={method}
                 onUnhandledError={onUnhandledError || noop}
             />
         );
-    }, [isEmbedded, isUsingMultiShipping, method, onUnhandledError]);
+
+        // Custom checklist items manage their own loading UI
+        return enhancedThemeV1 && !isCustomChecklistItem ? (
+            <LoadingOverlay
+                hideContentWhenLoading
+                isLoading={isSelected && Boolean(isInitializingPayment)}
+                loadingSkeleton={<PaymentMethodSkeleton />}
+            >
+                {paymentMethod}
+            </LoadingOverlay>
+        ) : (
+            paymentMethod
+        );
+    }, [
+        enhancedThemeV1,
+        isCustomChecklistItem,
+        isEmbedded,
+        isInitializingPayment,
+        isSelected,
+        isUsingMultiShipping,
+        method,
+        onUnhandledError,
+    ]);
 
     const renderPaymentMethodTitle = useCallback(
         (isSelected: boolean) => (
@@ -158,7 +198,7 @@ const PaymentMethodListItem: FunctionComponent<PaymentMethodListItemProps> = ({
         [disabledReason, method],
     );
 
-    if (method.initializationData?.isCustomChecklistItem) {
+    if (isCustomChecklistItem) {
         return <CustomChecklistItem content={renderPaymentMethod} htmlId={`radio-${value}`} />;
     }
 

packages/core/src/scss/enhancedThemeV1/components/_components.scss

@@ -11,3 +11,4 @@
 @import "checkout/payment-billing";
 @import "checkout/paymentProvider";
 @import "checkout/loading-dots";
+@import "checkout/payment-loading-skeleton";

packages/core/src/scss/enhancedThemeV1/components/checkout/_checklist.scss

@@ -71,5 +71,16 @@
         & ~ .form-label::before {
             border: 2px $input-border-style $input-border-color;
         }
+
+        // payments radio buttons should look non-interactive while initializing
+        &:disabled ~ .form-label,
+        &[aria-disabled="true"] ~ .form-label {
+            cursor: not-allowed;
+
+            &::before,
+            &::after {
+                opacity: $checkRadio-disabled-opacity;
+            }
+        }
     }
 }

packages/core/src/scss/enhancedThemeV1/components/checkout/_payment-loading-skeleton.scss

@@ -0,0 +1,20 @@
+@keyframes payment-method-skeleton-pulse {
+    0%, 100% {
+        background-color: color("greys", "lighter");
+    }
+
+    50% {
+        background-color: mix(color("greys", "light"), color("greys", "medium"), 50%);
+    }
+}
+
+.payment-method-skeleton {
+    @include enhancedThemeV1 {
+        padding: spacing("half") 0;
+
+        div {
+            animation: payment-method-skeleton-pulse 4000ms infinite cubic-bezier(0.13, 0.615, 0.315, 0.915);
+            background: color("greys", "lighter");
+        }
+    }
+}

packages/ui/src/form/LoadingSkeleton/PaymentMethodSkeleton.tsx

@@ -0,0 +1,9 @@
+import React, { type FunctionComponent } from 'react';
+
+import ChecklistSkeleton from './ChecklistSkeleton';
+
+export const PaymentMethodSkeleton: FunctionComponent = () => (
+    <div aria-busy="true" data-test="payment-method-skeleton" role="status">
+        <ChecklistSkeleton additionalClassName="payment-method-skeleton" rows={2} />
+    </div>
+);

packages/ui/src/form/LoadingSkeleton/index.ts

@@ -4,3 +4,4 @@ export { default as CheckoutPageSkeleton } from './CheckoutPageSkeleton';
 export { default as OrderConfirmationPageSkeleton } from './OrderConfirmationPageSkeleton';
 export { default as WalletButtonsContainerSkeleton } from './WalletButtonContainerSkeleton';
 export { CartSummarySkeleton } from './CartSummarySkeleton';
+export { PaymentMethodSkeleton } from './PaymentMethodSkeleton';

packages/ui/src/form/index.ts

@@ -20,6 +20,7 @@ export {
     CheckoutPageSkeleton,
     ChecklistSkeleton,
     OrderConfirmationPageSkeleton,
+    PaymentMethodSkeleton,
     WalletButtonsContainerSkeleton,
 } from './LoadingSkeleton';
 export { Label } from './Label';

packages/ui/src/index.ts

@@ -27,6 +27,7 @@ export {
     CheckboxInput,
     ChecklistSkeleton,
     OrderConfirmationPageSkeleton,
+    PaymentMethodSkeleton,
     Fieldset,
     Form,
     FormField,