refactor: move referrer dispatch to pricingCallback and add loading state

Move setReferrer dispatch from useEffect to pricingCallback to ensure
referrer is set synchronously when user proceeds. Add isLoading prop to
Pricing component to disable continue button while referrer is resolving.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: storywithoutend

src/components/pages/profile/[name]/registration/Registration.tsx

@@ -113,9 +113,8 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
   const { address } = useAccount()
   const primary = usePrimaryName({ address })
   const referrerParam = useReferrer()
-  const { data: resolvedReferrerHex } = useResolvedReferrer(referrerParam)
-  // Note: referrer is not included in `selected` to prevent creating new registration
-  // sessions when the referrer changes. It's updated separately via setReferrer action.
+  const { data: resolvedReferrerHex, isLoading: isResolvingReferrer } =
+    useResolvedReferrer(referrerParam)
   const selected = useMemo(
     () => ({ name: nameDetails.normalisedName, address: address!, chainId }),
     [address, chainId, nameDetails.normalisedName],
@@ -131,18 +130,6 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
   const { dispatch, item } = useRegistrationReducer(selected)
   const step = item.queue[item.stepIndex]
 
-  // Update referrer in registration data when resolved.
-  // This happens asynchronously and won't block the registration flow.
-  useEffect(() => {
-    if (resolvedReferrerHex) {
-      dispatch({
-        name: 'setReferrer',
-        selected,
-        payload: resolvedReferrerHex,
-      })
-    }
-  }, [resolvedReferrerHex, selected, dispatch])
-
   const keySuffix = `${nameDetails.normalisedName}-${address}`
   const commitKey = `commit-${keySuffix}`
   const registerKey = `register-${keySuffix}`
@@ -183,6 +170,13 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
       initiateMoonpayRegistrationMutation.mutate(secondsToYears(seconds))
       return
     }
+    if (resolvedReferrerHex) {
+      dispatch({
+        name: 'setReferrer',
+        selected,
+        payload: resolvedReferrerHex,
+      })
+    }
     dispatch({
       name: 'setPricingData',
       payload: { seconds, reverseRecord, durationType },
@@ -356,6 +350,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
                 registrationData={item}
                 moonpayTransactionStatus={moonpayTransactionStatus}
                 initiateMoonpayRegistrationMutation={initiateMoonpayRegistrationMutation}
+                isLoading={isResolvingReferrer}
               />
             ))
             .with([false, 'profile'], () => (

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx

@@ -367,6 +367,7 @@ export type ActionButtonProps = {
   estimatedTotal?: bigint
   ethPrice?: bigint
   durationType: 'date' | 'years'
+  isLoading?: boolean
 }
 
 export const ActionButton = (props: ActionButtonProps) => {
@@ -384,6 +385,11 @@ export const ActionButton = (props: ActionButtonProps) => {
         {t('steps.info.processing')}
       </Button>
     ))
+    .with({ isLoading: true }, () => (
+      <Button data-testid="next-button" disabled loading>
+        {t('loading', { ns: 'common' })}
+      </Button>
+    ))
     .with(
       { paymentMethodChoice: PaymentMethod.moonpay },
       ({
@@ -486,6 +492,7 @@ export type PricingProps = {
   initiateMoonpayRegistrationMutation: ReturnType<
     typeof useMoonpayRegistration
   >['initiateMoonpayRegistrationMutation']
+  isLoading?: boolean
 }
 
 const minSeconds = 28 * ONE_DAY
@@ -501,6 +508,7 @@ const Pricing = ({
   resolverExists,
   moonpayTransactionStatus,
   initiateMoonpayRegistrationMutation,
+  isLoading,
 }: PricingProps) => {
   const { t } = useTranslation('register')
 
@@ -621,6 +629,7 @@ const Pricing = ({
             estimatedTotal,
             ethPrice,
             durationType,
+            isLoading,
           }}
         />
       </MobileFullWidth>