perf(ui): do not re-animate drawer on re-render, reduce useEffects (#12743)

Previously, every time the drawer re-rendered a new entry animation may
be triggered. This PR fixes this by setting the open state to
`modalState[slug]?.isOpen` instead of `false`.

Additionally, I was able to simplify this component while maintaining
functionality. Got rid of one `useEffect` and one `useState` call. The
remaining useEffect also runs less often (previously, it ran every time
`modalState` changed => it re-ran if _any_ modal opened or closed, not
just the current one)

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

@@ -1,6 +1,6 @@
 'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
-import React, { createContext, use, useCallback, useEffect, useState } from 'react'
+import React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react'
 
 import type { Props, TogglerProps } from './types.js'
 
@@ -58,14 +58,11 @@ export const Drawer: React.FC<Props> = ({
   const { closeModal, modalState } = useModal()
   const drawerDepth = useDrawerDepth()
 
-  const [isOpen, setIsOpen] = useState(false)
-  const [animateIn, setAnimateIn] = useState(false)
+  const isOpen = !!modalState[slug]?.isOpen
 
-  useEffect(() => {
-    setIsOpen(modalState[slug]?.isOpen)
-  }, [slug, modalState])
+  const [animateIn, setAnimateIn] = useState(isOpen)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setAnimateIn(isOpen)
   }, [isOpen])