fix: Skip first frame render with motion appear (#73)

* refactor: add NONE state for styleReady to distinguish initial mount

On initial mount when status is STATUS_NONE, return 'NONE' instead of
true to prevent rendering children until style is ready. This improves
the appear animation behavior by ensuring style synchronization.

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

* test: update styleReady test to use correct className assertion

Removed TODO and updated className assertion to verify the first
render (prepare stage) with correct className value. Also changed
from toHaveBeenCalled to checking mockRender.mock.calls[0][0]
to match the first render call.

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

* fix: resolve TypeScript error for jest.mock.calls access

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/CSSMotion.tsx

@@ -190,6 +190,10 @@ export function genCSSMotion(config: CSSMotionConfig) {
 
       // We should render children when motionStyle is sync with stepStatus
       return React.useMemo(() => {
+        if (styleReady === 'NONE') {
+          return null;
+        }
+
         let motionChildren: React.ReactNode;
         const mergedProps = { ...eventProps, visible };
 

src/hooks/useStatus.ts

@@ -53,7 +53,7 @@ export default function useStatus(
   stepStatus: StepStatus,
   style: React.CSSProperties,
   visible: boolean,
-  styleReady: boolean,
+  styleReady: 'NONE' | boolean,
 ] {
   // Used for outer render usage to avoid `visible: false & status: none` to render nothing
   const [asyncVisible, setAsyncVisible] = React.useState<boolean>();
@@ -311,6 +311,13 @@ export default function useStatus(
     step,
     mergedStyle,
     asyncVisible ?? visible,
-    step === STEP_START || step === STEP_ACTIVE ? styleStep === step : true,
+
+    !mountedRef.current && currentStatus === STATUS_NONE
+      ? // Appear
+        'NONE'
+      : // Enter or Leave
+      step === STEP_START || step === STEP_ACTIVE
+      ? styleStep === step
+      : true,
   ];
 }

tests/CSSMotion.spec.tsx

@@ -492,6 +492,24 @@ describe('CSSMotion', () => {
     expect(activeBoxNode).toHaveClass(`animation-leave-active`);
   });
 
+  it('styleReady returns NONE on first mount when status is STATUS_NONE', () => {
+    const mockRender = jest.fn(() => null) as jest.Mock;
+    (mockRender as any).mock.calls = [] as any;
+
+    render(
+      <CSSMotion visible motionAppear motionName="test">
+        {mockRender}
+      </CSSMotion>,
+    );
+
+    // First render (prepare stage)
+    expect(mockRender.mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        className: 'test-appear test-appear-prepare test',
+      }),
+    );
+  });
+
   describe('immediately', () => {
     it('motionLeaveImmediately', async () => {
       const { container } = render(