From 99b36cee291f5681c43d0e1b651ca032f030441a Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 7 Jul 2023 14:59:12 +0800
Subject: [PATCH] fix: maybe fix framer bug

Signed-off-by: Innei <i@innei.in>
---
 .../layout/header/internal/Activity.tsx           | 15 ++++++++-------
 .../number-transition/NumberSmoothTransition.tsx  |  9 ++++++---
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/header/internal/Activity.tsx b/src/components/layout/header/internal/Activity.tsx
index 124c9afeca..38579c3dec 100644
--- a/src/components/layout/header/internal/Activity.tsx
+++ b/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 (
diff --git a/src/components/ui/number-transition/NumberSmoothTransition.tsx b/src/components/ui/number-transition/NumberSmoothTransition.tsx
index 5bf6cadb89..6b2fcd92cb 100644
--- a/src/components/ui/number-transition/NumberSmoothTransition.tsx
+++ b/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>
   )