[BUG] - REDUCE MOTION WITH CALENDAR HYDRATATION

[viclafouch]

NextUI Version

2.4.2

Describe the bug

The component Calendar has an hydratation issue with disableAnimation prop (from NextUIProvider) when using SSR and useReduceMotion.

Let's say we want to disable animation when user has reduce motion enabled.

On server, disableAnimation is undefined because we don't know the config of reduce motion from server (that's normal).
On client, if disableAnimation is true, we have hydratation issue.

Steps to Reproduce the Bug or Issue

1. Enable reduceMotion on your machine
2. Add this in your app.tsx

 const isReducedMotion = useReducedMotion() // from framer-motion

// ....

// HYDRATATION ISSUE HERE
<NextUIProvider disableAnimation={isReducedMotion}>
   <Calendar calendarWidth={350} />
</NextUIProvider>

Expected behavior

No Hydration issue just because of reduceMotion is changing to true to false or whatever

Screenshots or Videos

Operating System Version

MacOS

Browser

Chrome

[linear]

ENG-1095 [BUG] - REDUCE MOTION WITH CALENDAR HYDRATATION

[ryo-manba]

To avoid the hydration error, it's necessary to ensure that the initial render is consistent between the server and the client.
useEffect hook ensures that the state is only updated on the client side, avoiding discrepancies between the server-rendering and client-rendering HTML.

The following code resolves the issue.

export default function Page() {
  const reducedMotion = useReducedMotion();
  const [isReducedMotion, setIsReducedMotion] = useState(false);

  useEffect(() => {
    setIsReducedMotion(reducedMotion ?? false);
  }, [reducedMotion]);

  return (
    <NextUIProvider disableAnimation={isReducedMotion}>
      <Calendar calendarWidth={350} />
    </NextUIProvider>
  );
}

Reference: vercel/next.js#17443 (comment)