perf: entered

Daydreamer-riri · Apr 6, 2024 · d32059e · d32059e
1 parent a847816
commit d32059e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/src/hooks/useListTransition.tsx b/src/hooks/useListTransition.tsx
@@ -75,33 +75,37 @@ export function useListTransition<Item>(list: Array<Item>, options?: ListTransit
       }
 
       // 2 enter those new items immediatly
+      const fromItems = listState.filter(item => item.status === 'from')
       if (
         newItemsWithIndex.length === 0
-        && listState.some(item => item.status === 'from')
+        && fromItems.length > 0
       ) {
         setAnimationFrameTimeout(() => {
           setListState(prev =>
-            prev.map(item => {
-              if (entered && item.status === 'from') {
-                setAnimationFrameTimeout(() => {
-                  setListState(prev =>
-                    prev.map(_item =>
-                      _item.key === item.key && _item.status === 'entering'
-                        ? { ..._item, ...getState(STATUS.entered) }
-                        : item,
-                    ),
-                  )
-                }, enterTimeout)
-              }
-              return ({
-                ...item,
-                ...(item.status === 'from' ? getState(STATUS.entering) : {}),
-              })
-            }),
+            prev.map(item => ({
+              ...item,
+              ...(item.status === 'from' ? getState(STATUS.entering) : {}),
+            })),
           )
         })
       }
 
+      if (entered && fromItems.length > 0) {
+        setAnimationFrameTimeout(() => {
+          setListState(prev => {
+            return prev.map(item =>
+              (
+                fromItems.some(fromItem => fromItem.key === item.key)
+                && item.status === 'entering'
+              )
+                ? { ...item, ...getState(STATUS.entered) }
+                : item,
+            )
+          },
+          )
+        }, enterTimeout)
+      }
+
       // 3 leave items from list state
       const subtractItemStates = listState.filter(
         itemState =>

diff --git a/src/viewTransition.ts b/src/viewTransition.ts
@@ -3,6 +3,12 @@ import { flushSync } from 'react-dom'
 const isClient = typeof window !== 'undefined'
 const isSupportViewTransition = isClient && 'startViewTransition' in document
 
+const noop = (fn: any) => fn()
+
+export function viewTransition() {
+
+}
+
 export function startViewTransition(fn: () => void) {
   if (isSupportViewTransition) {
     // @ts-expect-error startViewTransition is not in the type definition