diff --git a/.changeset/fix-copy-test-url-button-shift.md b/.changeset/fix-copy-test-url-button-shift.md new file mode 100644 index 00000000000..399cf2a5bd1 --- /dev/null +++ b/.changeset/fix-copy-test-url-button-shift.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Fix layout shift when Copy test URL button enters loading state in `` diff --git a/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx index 6e4aa5f38b2..c7f21ed730f 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx @@ -708,7 +708,6 @@ type CopyTestUrlButtonProps = { }; const CopyTestUrlButton = ({ onTestRunCreated }: CopyTestUrlButtonProps): JSX.Element => { - const { t } = useLocalizations(); const { user } = useUser(); const card = useCardState(); const { enterpriseConnection } = useConfigureSSO(); @@ -743,17 +742,22 @@ const CopyTestUrlButton = ({ onTestRunCreated }: CopyTestUrlButtonProps): JSX.El size='xs' onClick={createTestRun} isDisabled={isCreatingTestRun} - isLoading={isCreatingTestRun} - loadingText={t(localizationKeys('configureSSO.testConfigurationStep.testUrl.actionLabel__copy'))} sx={t => ({ gap: t.space.$1x5, })} > - + {isCreatingTestRun ? ( + + ) : ( + + )}