chore(shared): Improve layout shift in payment element fallback (#6387)

Author: panteliselef

.changeset/fair-bars-agree.md

@@ -0,0 +1,7 @@
+---
+'@clerk/shared': patch
+---
+
+
+Improve layout behaviour with `<PaymentElement fallback={} />`.
+- Disables Stripe's loader, and promotes the usage of the `fallback` prop.

.changeset/vast-hoops-teach.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improve CLS when PaymentElement mounts in Checkout.

packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx

@@ -19,6 +19,7 @@ import { handleError } from '@/ui/utils/errorHandler';
 import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';
 import { descriptors, Flex, localizationKeys, Spinner, useAppearance, useLocalizations } from '../../customizables';
 import type { LocalizationKey } from '../../localization';
+import { PaymentElementSkeleton } from './PaymentElementSkeleton';
 
 const useStripeAppearance = (node: HTMLElement | null) => {
   const theme = useAppearance().parsedInternalTheme;
@@ -231,7 +232,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
         })}
       >
         {children}
-        <PaymentElement />
+        <PaymentElement fallback={<PaymentElementSkeleton />} />
         <Card.Alert>{card.error}</Card.Alert>
         <FormButtons
           isDisabled={!isFormReady}

packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx

@@ -0,0 +1,115 @@
+import type { PropsWithChildren } from 'react';
+
+import { Box, Flex, Grid } from '@/ui/customizables';
+
+const SkeletonLine = (props: Parameters<typeof Box>[0]) => {
+  return (
+    <Box
+      sx={[
+        t => ({
+          height: t.space.$2,
+          width: '100%',
+          borderRadius: t.radii.$md,
+          background: t.colors.$neutralAlpha100,
+        }),
+        props.sx,
+      ]}
+    />
+  );
+};
+
+const SkeletonInput = () => {
+  return (
+    <SkeletonLine
+      sx={t => ({
+        height: t.space.$10,
+        width: '100%',
+      })}
+    />
+  );
+};
+
+const LineGroup = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      direction='col'
+      gap={2}
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+const PaymentElementSkeleton = () => {
+  return (
+    <Box
+      aria-label='Loading...'
+      sx={{
+        position: 'relative',
+        minHeight: 0,
+        flex: 1,
+        overflowY: 'auto',
+      }}
+    >
+      <Flex
+        direction='col'
+        gap={5}
+      >
+        <LineGroup>
+          <SkeletonLine
+            sx={t => ({
+              height: t.space.$3,
+              width: t.sizes.$24,
+            })}
+          />
+          <SkeletonInput />
+        </LineGroup>
+
+        <Grid
+          columns={2}
+          gap={4}
+        >
+          <LineGroup>
+            <SkeletonLine
+              sx={t => ({
+                height: t.space.$3,
+                width: t.sizes.$20,
+              })}
+            />
+
+            <SkeletonInput />
+          </LineGroup>
+          <LineGroup>
+            <SkeletonLine
+              sx={t => ({
+                height: t.space.$3,
+                width: t.sizes.$24,
+              })}
+            />
+
+            <SkeletonInput />
+          </LineGroup>
+        </Grid>
+
+        <LineGroup>
+          <SkeletonLine
+            sx={t => ({
+              height: t.space.$3,
+              width: t.sizes.$16,
+            })}
+          />
+
+          <SkeletonInput />
+        </LineGroup>
+
+        <LineGroup>
+          <SkeletonLine />
+          <SkeletonLine />
+          <SkeletonLine sx={{ width: '66.666667%' }} />
+        </LineGroup>
+      </Flex>
+    </Box>
+  );
+};
+
+export { PaymentElementSkeleton };

packages/shared/src/react/commerce.tsx

@@ -206,6 +206,7 @@ const PaymentElementInternalRoot = (props: PropsWithChildren) => {
         key={externalClientSecret}
         stripe={stripe}
         options={{
+          loader: 'never',
           clientSecret: externalClientSecret,
           appearance: {
             variables: stripeAppearance,

packages/shared/src/react/stripe-react/index.tsx

@@ -429,6 +429,10 @@ const createElementComponent = (type: StripeElementType, isServer: boolean): Fun
         {!isReady && fallback}
         <div
           id={id}
+          style={{
+            height: isReady ? 'unset' : '0px',
+            visibility: isReady ? 'visible' : 'hidden',
+          }}
           className={className}
           ref={domNode}
         />