perf: disable accent transition in safari

Author: Innei

src/components/widgets/post/PostMetaBar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Fragment } from 'react'
 import Link from 'next/link'
 import type { PostModel } from '@mx-space/api-client'
 
@@ -70,7 +71,7 @@ export const PostMetaBar: Component<{
                   const isLast = index === meta.tags!.length - 1
 
                   return (
-                    <>
+                    <Fragment key={tag}>
                       <button
                         className="shiro-link--underline"
                         onClick={() =>
@@ -84,7 +85,7 @@ export const PostMetaBar: Component<{
                         {tag}
                       </button>
                       {!isLast && <span>, </span>}
-                    </>
+                    </Fragment>
                   )
                 })}
               </>

src/providers/root/accent-color-provider.tsx

@@ -3,6 +3,8 @@ import { useServerInsertedHTML } from 'next/navigation'
 import type { AccentColor } from '~/app/config'
 import type { PropsWithChildren } from 'react'
 
+import { useEventCallback } from '~/hooks/common/use-event-callback'
+import { debounce } from '~/lib/_'
 import { generateTransitionColors, hexToHsl } from '~/lib/color'
 import { noopObj } from '~/lib/noop'
 
@@ -27,8 +29,12 @@ const accentColorDark = [
   '#838BC6',
 ]
 
+const isSafari = () =>
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
 const STEP = 60
-const INTERVAL = 300
+const INTERVAL = 500
+
 export const AccentColorProvider = ({ children }: PropsWithChildren) => {
   const { light, dark } =
     useAppConfigSelector((config) => config.color) || (noopObj as AccentColor)
@@ -42,7 +48,7 @@ export const AccentColorProvider = ({ children }: PropsWithChildren) => {
   const currentAccentColorDRef = useRef(darkColors[randomSeedRef.current])
 
   const [u, update] = useState(0)
-  useEffect(() => {
+  const updateColorEvent = useEventCallback(() => {
     const $style = document.createElement('style')
 
     const nextSeed = (randomSeedRef.current + 1) % Length
@@ -59,13 +65,17 @@ export const AccentColorProvider = ({ children }: PropsWithChildren) => {
       STEP,
     )
 
-    const timer = setTimeout(function updateAccent() {
+    let timerDispose = setIdleTimeout(function updateAccent() {
       const colorD = colorsD.shift()
       const colorL = colorsL.shift()
       if (colorD && colorL) {
         currentAccentColorDRef.current = colorD
         currentAccentColorLRef.current = colorL
-        setTimeout(updateAccent, INTERVAL)
+
+        try {
+          timerDispose()
+        } catch {}
+        timerDispose = setIdleTimeout(updateAccent, INTERVAL)
       } else {
         randomSeedRef.current = nextSeed
         currentAccentColorDRef.current = nextColorD
@@ -92,13 +102,18 @@ export const AccentColorProvider = ({ children }: PropsWithChildren) => {
 
     document.head.appendChild($style)
     return () => {
-      clearTimeout(timer)
+      timerDispose()
 
       setTimeout(() => {
         document.head.removeChild($style)
       }, INTERVAL)
     }
-  }, [Length, darkColors, lightColors, u])
+  })
+  useEffect(() => {
+    // safari 性能不行
+    if (isSafari()) return
+    return updateColorEvent()
+  }, [Length, darkColors, lightColors, u, updateColorEvent])
 
   useServerInsertedHTML(() => {
     const lightHsl = hexToHsl(currentAccentColorLRef.current)
@@ -129,3 +144,38 @@ export const AccentColorProvider = ({ children }: PropsWithChildren) => {
 
   return children
 }
+
+function setIdleTimeout(onIdle: () => void, timeout: number): () => void {
+  let timeoutId: number | undefined
+
+  const debounceReset = debounce(() => {
+    clearTimeout(timeoutId)
+    timeoutId = window.setTimeout(() => {
+      onIdle()
+    }, timeout)
+  }, 100)
+
+  // 重置计时器的函数
+  const resetTimer = () => {
+    window.clearTimeout(timeoutId)
+    debounceReset()
+  }
+
+  // 监听浏览器的活动事件
+  window.addEventListener('mousemove', resetTimer)
+  window.addEventListener('keypress', resetTimer)
+  window.addEventListener('touchstart', resetTimer)
+  window.addEventListener('scroll', resetTimer)
+
+  // 启动计时器
+  resetTimer()
+
+  // 提供取消功能
+  return function cancel(): void {
+    window.clearTimeout(timeoutId)
+    window.removeEventListener('mousemove', resetTimer)
+    window.removeEventListener('keypress', resetTimer)
+    window.removeEventListener('touchstart', resetTimer)
+    window.removeEventListener('scroll', resetTimer)
+  }
+}