diff --git a/.changeset/tiny-lands-retire.md b/.changeset/tiny-lands-retire.md new file mode 100644 index 00000000000..c717a866377 --- /dev/null +++ b/.changeset/tiny-lands-retire.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Bug fix: Drawers would always act as prefered-reduced-motion was turned on on the first render. diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index beaccfdac08..7d1e6308809 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -4,7 +4,7 @@ { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" }, - { "path": "./dist/ui-common*.js", "maxSize": "108.54KB" }, + { "path": "./dist/ui-common*.js", "maxSize": "108.56KB" }, { "path": "./dist/vendors*.js", "maxSize": "40.2KB" }, { "path": "./dist/coinbase*.js", "maxSize": "38KB" }, { "path": "./dist/createorganization*.js", "maxSize": "5KB" }, diff --git a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts b/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts index 23fa361d2fc..eb85b4fee56 100644 --- a/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts +++ b/packages/clerk-js/src/ui/hooks/usePrefersReducedMotion.ts @@ -2,8 +2,14 @@ import { useEffect, useState } from 'react'; const mediaQueryNoPreference = '(prefers-reduced-motion: no-preference)'; +// Get the correct initial value instead of defaulting to true +const getInitialValue = () => { + if (typeof window === 'undefined') return true; // SSR fallback + return !window.matchMedia(mediaQueryNoPreference).matches; +}; + export function usePrefersReducedMotion() { - const [prefersReducedMotion, setPrefersReducedMotion] = useState(true); + const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialValue); useEffect(() => { const mediaQueryList = window.matchMedia(mediaQueryNoPreference);