fix(clerk-js): Fix layout shift for Social block buttons (#1838)

* fix(clerk-js): Removed loading spinner padding and constrained the social image to the parent width * chore(repo): Add changeset * feat(clerk-js): Added new size variant for Spinner * feat(clerk-js): Increase icon and spinner size for ArrowBlockButton component * fix(clerk-js): Update Spinner size
clerk · Oct 10, 2023 · f20adc3 · f20adc3
1 parent c9b17f5
commit f20adc3
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 15 deletions.
diff --git a/.changeset/honest-countries-repair.md b/.changeset/honest-countries-repair.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Updated the OAuth buttons in the SignIn and SignUp components to prevent layout shifts while loading.
diff --git a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
@@ -22,7 +22,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         }}
       >
         <Spinner
-          size='md'
+          size='sm'
           colorScheme='primary'
         />
       </Box>

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -83,7 +83,7 @@ export const PreviewListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         }}
       >
         <Spinner
-          size='md'
+          size='sm'
           colorScheme='primary'
         />
       </Box>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
@@ -144,7 +144,7 @@ export const DomainList = (props: DomainListProps) => {
             }}
           >
             <Spinner
-              size='md'
+              size='sm'
               colorScheme='primary'
             />
           </Box>

diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -95,7 +95,7 @@ export const Action = (props: ActionProps) => {
         sx={theme => ({ flex: `0 0 ${theme.sizes.$11}` })}
       >
         {status.isLoading ? (
-          <Spinner size='sm' />
+          <Spinner size='xs' />
         ) : (
           <Icon
             elementDescriptor={iconElementDescriptor}

diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -73,18 +73,13 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
         <Flex
           as='span'
           center
-          sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}
+          sx={theme => ({ flex: `0 0 ${theme.space.$5}` })}
         >
           {isLoading ? (
             <Spinner
               elementDescriptor={spinnerElementDescriptor}
               elementId={spinnerElementId}
               size={'md'}
-              sx={theme => [
-                {
-                  padding: theme.space.$2,
-                },
-              ]}
             />
           ) : !isIconElement && leftIcon ? (
             <Icon
@@ -94,7 +89,7 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
               sx={[
                 theme => ({
                   color: theme.colors.$blackAlpha600,
-                  width: theme.sizes.$4,
+                  width: theme.sizes.$5,
                   position: 'absolute',
                 }),
                 leftIconSx,

diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -84,7 +84,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
               isDisabled={card.isLoading}
               src={strategyToDisplayData[strategy].iconUrl}
               alt={`Sign in with ${strategyToDisplayData[strategy].name}`}
-              sx={theme => ({ width: theme.sizes.$5 })}
+              sx={theme => ({ width: theme.sizes.$5, height: 'auto', maxWidth: '100%' })}
             />
           }
         />

diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/clerk-js/src/ui/primitives/Spinner.tsx
@@ -37,8 +37,9 @@ const { applyVariants, filterProps } = createVariants(theme => {
         md: { [thickness]: theme.sizes.$1 },
       },
       size: {
-        sm: { [size]: theme.sizes.$3 },
-        md: { [size]: theme.sizes.$4 },
+        xs: { [size]: theme.sizes.$3 },
+        sm: { [size]: theme.sizes.$4 },
+        md: { [size]: theme.sizes.$5 },
         lg: { [size]: theme.sizes.$6 },
         xl: { [size]: theme.sizes.$8 },
       },
@@ -50,7 +51,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
     defaultVariants: {
       speed: 'normal',
       thickness: 'sm',
-      size: 'md',
+      size: 'sm',
     },
   };
 });