[BUG] - On page refresh. Warning: React does not recognize the disableAnimation prop on a DOM element

[joelrb]

NextUI Version

"@nextui-org/avatar": "^2.0.30", "@nextui-org/dropdown": "^2.1.26",

Describe the bug

When refreshing the page from the browser, below warning show up in the terminal.

It seems the warning is generated from the Avatar component in the Dropdown.
<Dropdown> <DropdownTrigger> <Avatar isBordered color="default" showFallback src={user?.image || ""} fallback={ <FaUser className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={10} /> } /> </DropdownTrigger> <DropdownMenu aria-label="Static Actions"> <DropdownItem key="Dashboard" color="danger" href="/dashboard"> <div className="flex items-center gap-x-4"><LayoutDashboardIcon color="blue" size={16}/> Dashboard</div> </DropdownItem> <DropdownItem key="Profile" color="danger" href="/profile"> <div className="flex items-center gap-x-4"><UserIcon color="green" size={16}/> Profile</div> </DropdownItem> <DropdownItem key="Logout" color="danger"> <LogoutButton> <div className="flex items-center gap-x-4"><LogOutIcon color="black" size={16}/> Logout</div> </LogoutButton> </DropdownItem> </DropdownMenu> </Dropdown>

Warning: React does not recognize the disableAnimationprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasedisableanimation instead. If you accidentally passed it from a parent component, remove it from the DOM element. at img at span at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/avatar/dist/chunk-E7SLBJI6.mjs:17:369) at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/popover/dist/chunk-HGSZQ3PO.mjs:23:115) at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs:15:108) at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/popover/dist/chunk-TUQADBBZ.mjs:21:13) at Dropdown (webpack-internal:///(ssr)/./node_modules/@nextui-org/dropdown/dist/chunk-3YEK3JGC.mjs:17:13) at div at div at UserButton (webpack-internal:///(ssr)/./components/auth/userButton.tsx:24:23) at li at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/navbar/dist/chunk-MG5LCNUN.mjs:19:13) at ul at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/navbar/dist/chunk-PSG7VTZC.mjs:18:13) at header at nav at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/navbar/dist/chunk-7PE36HBJ.mjs:27:13) at Navbar (webpack-internal:///(ssr)/./components/navbar.tsx:38:19) at Lazy at div at O (webpack-internal:///(ssr)/./node_modules/next-themes/dist/index.mjs:22:24) at z (webpack-internal:///(ssr)/./node_modules/next-themes/dist/index.mjs:17:48) at $ea8dcbcb9ea1b556$export$323e4fc2fa4753fb (webpack-internal:///(ssr)/./node_modules/@react-aria/utils/dist/openLink.mjs:36:21) at div at $f57aed4a881a3485$var$OverlayContainerDOM (webpack-internal:///(ssr)/./node_modules/@react-aria/overlays/dist/useModal.mjs:64:54) at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///(ssr)/./node_modules/@react-aria/overlays/dist/useModal.mjs:31:21) at $f57aed4a881a3485$export$bf688221f59024e5 at $18f2051aff69b9bf$export$a54013f0d02a8f82 (webpack-internal:///(ssr)/./node_modules/@react-aria/i18n/dist/context.mjs:28:19) at NextUIProvider (webpack-internal:///(ssr)/./node_modules/@nextui-org/system/dist/chunk-NT3GAERU.mjs:22:25) at Providers (webpack-internal:///(ssr)/./app/providers.tsx:17:22) at Lazy at body at html at SessionProvider (webpack-internal:///(ssr)/./node_modules/next-auth/react.js:238:13) at Lazy at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9) at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:322:11) at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:202:11) at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:112:9) at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11) at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:564:13) at Lazy at r4 (C:\Data\GitHub\projects\EdisonAI\System\WebUI\edisonai\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:18826) at r4 (C:\Data\GitHub\projects\EdisonAI\System\WebUI\edisonai\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:18826) at ServerInsertedHTMLProvider (C:\Data\GitHub\projects\EdisonAI\System\WebUI\edisonai\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:24256)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create NextJS application using the NextUI template (https://github.com/nextui-org/next-app-template).
2. Add a Dropdown component with an Avatar.

Expected behavior

No prop warning.

Screenshots or Videos

Operating System Version

Windows

Browser

Edge

[linear]

ENG-1137 [BUG] - On page refresh. Warning: React does not recognize the `disableAnimation` prop on a DOM element

[wingkwong]

Fixed in canary already. See #3257 (comment)