chore: nextFrame

Signed-off-by: Innei <i@innei.in>
RSSNext · Jun 22, 2024 · 800706a · 800706a
1 parent 1c79755
commit 800706a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 24 deletions.
diff --git a/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx b/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
@@ -1,5 +1,5 @@
 import { useRefValue } from "@renderer/hooks"
-import { stopPropagation } from "@renderer/lib/dom"
+import { nextFrame, stopPropagation } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import clsx from "clsx"
 import { AnimatePresence } from "framer-motion"
@@ -83,11 +83,11 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
     useEffect(() => {
       const $input = inputRef.current
       if (!$input) return
-      if (document.activeElement !== $input) { return }
+      if (document.activeElement !== $input) {
+        return
+      }
 
-      setIsOpen(
-        filterableSuggestions.length > 0,
-      )
+      setIsOpen(filterableSuggestions.length > 0)
     }, [filterableSuggestions])
 
     const [isOpen, setIsOpen] = useState(false)
@@ -145,11 +145,9 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
           onSuggestionSelected(filterableSuggestions[currentActiveIndex])
           setInputValue(filterableSuggestions[currentActiveIndex].name)
 
-          requestAnimationFrame((() => {
-            requestAnimationFrame(() => {
-              setIsOpen(false)
-            })
-          }))
+          nextFrame(() => {
+            setIsOpen(false)
+          })
         }
       }
 

diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
@@ -7,7 +7,7 @@ import { useSignOut } from "@renderer/hooks"
 import { loginHandler } from "@renderer/lib/auth"
 import { tipcClient } from "@renderer/lib/client"
 import { APP_NAME } from "@renderer/lib/constants"
-import { stopPropagation } from "@renderer/lib/dom"
+import { nextFrame, stopPropagation } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { useSettingModal } from "@renderer/modules/settings/modal/hooks"
 import { useSession } from "@renderer/queries/auth"
@@ -140,11 +140,7 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
               // Here we need to delay one frame, so it's two raf,
               //  in order to have `point-event: none` recorded by RadixOverlay after modal is invoked in a certain scenario,
               // and the page freezes after modal is turned off.
-              requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                  settingModalPresent()
-                })
-              })
+              nextFrame(settingModalPresent)
             }
           }}
         >

diff --git a/src/renderer/src/lib/dom.ts b/src/renderer/src/lib/dom.ts
@@ -4,3 +4,11 @@ export const stopPropagation: ReactEventHandler<any> = (e) =>
   e.stopPropagation()
 
 export const preventDefault: ReactEventHandler<any> = (e) => e.preventDefault()
+
+export const nextFrame = (fn: (...args: any[]) => any) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      fn()
+    })
+  })
+}
diff --git a/src/renderer/src/modules/feed-column/item.tsx b/src/renderer/src/modules/feed-column/item.tsx
@@ -14,6 +14,7 @@ import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
 import { apiClient } from "@renderer/lib/api-fetch"
 import { levels } from "@renderer/lib/constants"
 import dayjs from "@renderer/lib/dayjs"
+import { nextFrame } from "@renderer/lib/dom"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
 import { Queries } from "@renderer/queries"
@@ -49,10 +50,8 @@ const FeedItemImpl = ({
         category: null,
       })
       // focus to main container in order to let keyboard can navigate entry items by arrow keys
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          getMainContainerElement()?.focus()
-        })
+      nextFrame(() => {
+        getMainContainerElement()?.focus()
       })
     },
     [subscription.feedId, navigate, view],

diff --git a/src/renderer/src/providers/context-menu-provider.tsx b/src/renderer/src/providers/context-menu-provider.tsx
@@ -5,6 +5,7 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@renderer/components/ui/context-menu"
+import { nextFrame } from "@renderer/lib/dom"
 import type { NativeMenuItem } from "@renderer/lib/native-menu"
 import { CONTEXT_MENU_SHOW_EVENT_KEY } from "@renderer/lib/native-menu"
 import type { ReactNode } from "react"
@@ -59,10 +60,8 @@ const Handler = () => {
                     // Here we need to delay one frame,
                     // so it's two raf's, in order to have `point-event: none` recorded by RadixOverlay after modal is invoked in a certain scenario,
                     // and the page freezes after modal is turned off.
-                    requestAnimationFrame(() => {
-                      requestAnimationFrame(() => {
-                        item.click?.()
-                      })
+                    nextFrame(() => {
+                      item.click?.()
                     })
                   }}
                 >