From 8d9463861d360c7c6b5df48a407ec3e773c57b0c Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 14 Sep 2023 21:30:25 +0300
Subject: [PATCH 1/4] fix(clerk-js): Added padding for ArrowBlockButton to
 prevent layout shifting

---
 .../clerk-js/src/ui/elements/ArrowBlockButton.tsx   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index d5bb31dd03f..c5c3a447210 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -73,14 +73,21 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
         <Flex
           as='span'
           center
-          sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}
+          sx={[
+            theme => ({
+              flex: `0 0 ${theme.space.$4}`,
+            }),
+            theme =>
+              isLoading && {
+                padding: theme.space.$0x5,
+              },
+          ]}
         >
           {isLoading ? (
             <Spinner
               elementDescriptor={spinnerElementDescriptor}
               elementId={spinnerElementId}
-              sx={{ position: 'absolute' }}
-              size={'sm'}
+              size={'md'}
             />
           ) : !isIconElement && leftIcon ? (
             <Icon

From aa2f02ea1b52359e049e1e8fd0ee0e74e51c6f3b Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 14 Sep 2023 21:47:11 +0300
Subject: [PATCH 2/4] chore(repo): Adds changeset

---
 .changeset/large-baboons-hope.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/large-baboons-hope.md

diff --git a/.changeset/large-baboons-hope.md b/.changeset/large-baboons-hope.md
new file mode 100644
index 00000000000..751d8e87a46
--- /dev/null
+++ b/.changeset/large-baboons-hope.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Added some padding when the ArrowBlockButton is in loading state and has a left icon to prevent layout shift.

From f16e3cfd5bb663cef447558427834cd3c2d68b53 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <vaggelisyfantis@gmail.com>
Date: Fri, 15 Sep 2023 16:53:48 +0300
Subject: [PATCH 3/4] Update .changeset/large-baboons-hope.md

Co-authored-by: Nikos Douvlis <nikosdouvlis@gmail.com>
---
 .changeset/large-baboons-hope.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/large-baboons-hope.md b/.changeset/large-baboons-hope.md
index 751d8e87a46..45e57288d2c 100644
--- a/.changeset/large-baboons-hope.md
+++ b/.changeset/large-baboons-hope.md
@@ -2,4 +2,4 @@
 '@clerk/clerk-js': patch
 ---
 
-Added some padding when the ArrowBlockButton is in loading state and has a left icon to prevent layout shift.
+Updated the OAuth buttons in the SignIn and SignUp components to prevent layout shifts while loading.

From 3e1f0e14be7d5d524fbda4698a221c506a4772bf Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 18 Sep 2023 11:32:55 +0300
Subject: [PATCH 4/4] fix(clerk-js): Added padding to the Spinner component

---
 .../clerk-js/src/ui/elements/ArrowBlockButton.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index c5c3a447210..3a660ac2885 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -73,21 +73,18 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
         <Flex
           as='span'
           center
-          sx={[
-            theme => ({
-              flex: `0 0 ${theme.space.$4}`,
-            }),
-            theme =>
-              isLoading && {
-                padding: theme.space.$0x5,
-              },
-          ]}
+          sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}
         >
           {isLoading ? (
             <Spinner
               elementDescriptor={spinnerElementDescriptor}
               elementId={spinnerElementId}
               size={'md'}
+              sx={theme => [
+                {
+                  padding: theme.space.$2,
+                },
+              ]}
             />
           ) : !isIconElement && leftIcon ? (
             <Icon