fix: maybe fix framer bug

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/layout/header/internal/Activity.tsx

@@ -12,6 +12,7 @@ import {
   useActivity,
 } from '~/atoms/activity'
 import { FloatPopover } from '~/components/ui/float-popover'
+import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { apiClient } from '~/lib/request'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 
@@ -99,15 +100,15 @@ export function Activity() {
 
   const ownerName = useAggregationSelector((data) => data.user.name)
   const memoProcessName = useMemo(
-    () => ({ processName: data?.processName || '' }),
-    [data?.processName],
+    () => ({ processName: activity?.processName || '' }),
+    [activity?.processName],
   )
-  if (!data) {
-    return null
-  }
+
   const { processName, media } = activity
-  if (!appLabels[processName]) {
-    console.log('Not collected process name: ', processName)
+  const debounceProcess = useDebounceValue(processName, 300)
+
+  if (!appLabels[debounceProcess]) {
+    console.log('Not collected process name: ', debounceProcess)
   }
 
   return (

src/components/ui/number-transition/NumberSmoothTransition.tsx

@@ -3,15 +3,17 @@
 import { AnimatePresence, m } from 'framer-motion'
 
 import { microdampingPreset } from '~/constants/spring'
+import useDebounceValue from '~/hooks/common/use-debounce-value'
 
 export const NumberSmoothTransition = (props: {
   children: string | number
 }) => {
   const { children } = props
+  const debouncedChildren = useDebounceValue(children, 300)
   return (
-    <AnimatePresence mode="popLayout">
+    <AnimatePresence mode="popLayout" initial={false}>
       <m.span
-        key={children}
+        key={debouncedChildren}
         initial={{
           opacity: 0,
           y: -16,
@@ -23,10 +25,11 @@ export const NumberSmoothTransition = (props: {
         exit={{
           opacity: 0,
           y: -16,
+          position: 'absolute',
         }}
         transition={microdampingPreset}
       >
-        {children}
+        {debouncedChildren}
       </m.span>
     </AnimatePresence>
   )