fix(mosaic): show connected account verification errors without animating on load

Author: austincalvelage

.changeset/connected-accounts-verification-error-no-animate.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/section/section.tsx

@@ -308,7 +308,7 @@ const SectionError = React.forwardRef<HTMLParagraphElement, SectionErrorProps>(f
   const element = React.useRef<HTMLElement | null>(null);
   const [messageElement, setMessageElement] = React.useState<HTMLElement | null>(null);
   const height = useMessageHeight(messageElement);
-  const { mounted, transitionProps } = useTransition({ open, ref: element });
+  const { mounted, transitionProps } = useTransition({ open, ref: element, animateOnMount: false });
   const message = useHeldMessage(children, open);
   const messageProps = stylex.props(reset.base, feedbackStyles.message, feedbackStyles.error);
 

packages/mosaic/src/primitives/hooks/use-transition.ts

@@ -1,13 +1,14 @@
 'use client';
 
-import { type CSSProperties, type RefObject, useEffect, useMemo } from 'react';
+import { type CSSProperties, type RefObject, useEffect, useMemo, useState } from 'react';
 
 import { useAnimationsFinished } from './use-animations-finished';
 import { type TransitionStatus, useTransitionStatus } from './use-transition-status';
 
 export interface UseTransitionOptions {
   open: boolean;
   ref: RefObject<HTMLElement | null>;
+  animateOnMount?: boolean;
 }
 
 export interface TransitionProps {
@@ -38,8 +39,12 @@ export interface UseTransitionReturn {
  * transitions (via `[data-starting-style]` / `[data-ending-style]`) and
  * CSS keyframe animations (via `[data-open]` / `[data-closed]`).
  */
-export function useTransition({ open, ref }: UseTransitionOptions): UseTransitionReturn {
+export function useTransition({ open, ref, animateOnMount = true }: UseTransitionOptions): UseTransitionReturn {
   const { mounted, transitionStatus, setMounted } = useTransitionStatus(open);
+  const [skipEnter, setSkipEnter] = useState(open && !animateOnMount);
+  if (skipEnter && transitionStatus !== 'starting') {
+    setSkipEnter(false);
+  }
   const runOnAnimationsFinished = useAnimationsFinished(ref, open);
 
   useEffect(() => {
@@ -62,13 +67,15 @@ export function useTransition({ open, ref }: UseTransitionOptions): UseTransitio
       props['data-closed'] = '';
     }
     if (transitionStatus === 'starting') {
-      props['data-starting-style'] = '';
+      if (!skipEnter) {
+        props['data-starting-style'] = '';
+      }
       props.style = { transition: 'none' };
     } else if (transitionStatus === 'ending') {
       props['data-ending-style'] = '';
     }
     return props;
-  }, [open, mounted, transitionStatus]);
+  }, [open, mounted, transitionStatus, skipEnter]);
 
   return { mounted, transitionStatus, transitionProps };
 }