fix: disable interactive elements before hydration complete

GitOrigin-RevId: f5117b433982b6fd6c2fa0adba5d2d46c5ace665

Author: pcaillaudm

packages/elements-react/src/theme/default/components/card/auth-method-list-item.tsx

@@ -13,6 +13,7 @@ import lookup_secret from "../../assets/icons/code-asterix.svg"
 import logos from "../../provider-logos"
 import { isGroupImmediateSubmit } from "../../utils/form"
 import { ListItem } from "./list-item"
+import { useFormContext } from "react-hook-form"
 
 const iconsMap: Record<string, typeof code> = {
   code,
@@ -33,6 +34,8 @@ export function DefaultAuthMethodListItem({
   const intl = useIntl()
   const Icon = iconsMap[group] || null
 
+  const { formState } = useFormContext()
+
   return (
     <ListItem
       as="button"
@@ -47,6 +50,7 @@ export function DefaultAuthMethodListItem({
       onClick={onClick}
       type={isGroupImmediateSubmit(group) ? "submit" : "button"}
       data-testid={`ory/form/auth-picker/${group}`}
+      disabled={!formState.isReady}
     />
   )
 }

packages/elements-react/src/theme/default/components/form/button.tsx

@@ -58,7 +58,7 @@ export const DefaultButton = ({
   const intl = useIntl()
   const label = getNodeLabel(node)
   const {
-    formState: { isSubmitting },
+    formState: { isSubmitting, isReady },
     setValue,
   } = useFormContext()
 
@@ -92,7 +92,7 @@ export const DefaultButton = ({
       className={buttonStyles({
         intent: isPrimary ? "primary" : "secondary",
       })}
-      disabled={rest.disabled ?? isSubmitting}
+      disabled={!isReady && (rest.disabled ?? isSubmitting)}
       data-loading={clicked}
     >
       {clicked ? <Spinner /> : null}