fix(ui): keep the list drawer mounted while its page changes

packages/ui/src/elements/ListDrawer/DrawerContent.tsx

@@ -3,7 +3,7 @@ import type { CollectionSlug, ListQuery } from 'payload'
 
 import { useModal } from '@faceless-ui/modal'
 import { hoistQueryParamsToAnd } from 'payload/shared'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { startTransition, useCallback, useEffect, useState } from 'react'
 
 import type { ListDrawerContextProps, ListDrawerContextType } from '../ListDrawer/Provider.js'
 import type {
@@ -110,11 +110,18 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
             } satisfies RenderListServerFnArgs,
           })) as RenderListServerFnReturnType
 
-          setListView(result?.List || null)
+          // Commit with the previous list still showing. A synchronous update suspends
+          // into the fallback and unmounts `.drawer__fade-in`, so the open animation runs again.
+          startTransition(() => {
+            setListView(result?.List || null)
+            setIsLoading(false)
+          })
         } else {
-          setListView(null)
+          startTransition(() => {
+            setListView(null)
+            setIsLoading(false)
+          })
         }
-        setIsLoading(false)
       } catch (_err) {
         console.error('Error rendering List View: ', _err) // eslint-disable-line no-console
 

packages/ui/src/elements/ListDrawer/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useModal } from '@faceless-ui/modal'
-import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 
 import type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types.js'
 
@@ -88,6 +88,10 @@ export const useListDrawer: UseListDrawer = ({
   const { closeModal, modalState, openModal, toggleModal } = useModal()
   const [isOpen, setIsOpen] = useState(false)
   const [collectionSlugs, setCollectionSlugs] = useState(collectionSlugsFromProps)
+  // A new object identity must not recreate MemoizedDrawer. React treats that as a
+  // new component type and remounts the open drawer, replaying its enter animation.
+  const filterOptionsRef = useRef(filterOptions)
+  filterOptionsRef.current = filterOptions
 
   const drawerSlug = formatListDrawerSlug({
     depth: drawerDepth,
@@ -130,13 +134,13 @@ export const useListDrawer: UseListDrawer = ({
         closeDrawer={closeDrawer}
         collectionSlugs={collectionSlugs}
         drawerSlug={drawerSlug}
-        filterOptions={filterOptions}
+        filterOptions={filterOptionsRef.current}
         key={drawerSlug}
         selectedCollection={selectedCollection}
         uploads={uploads}
       />
     )
-  }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection, filterOptions])
+  }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection])
 
   const MemoizedDrawerToggler = useMemo(() => {
     return (props) => <ListDrawerToggler {...props} drawerSlug={drawerSlug} />