fix(animations): add countup animation to admins page and make it reusable component

Author: x0sina

dashboard/src/components/AdminStatistics.tsx

@@ -1,11 +1,11 @@
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils.ts'
-import { numberWithCommas } from '@/utils/formatByte'
 import { useTranslation } from 'react-i18next'
 import { Card, CardTitle } from '@/components/ui/card'
+import { CountUp } from '@/components/ui/count-up'
 import { type AdminDetails } from '@/service/api'
 import { User, UserCheck, UserX } from 'lucide-react'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 interface AdminsStatisticsProps {
   data: AdminDetails[]
@@ -14,28 +14,48 @@ interface AdminsStatisticsProps {
 export default function AdminStatisticsSection({ data }: AdminsStatisticsProps) {
   const { t } = useTranslation()
   const dir = useDirDetection()
+  const [prevStats, setPrevStats] = useState<{ total: number; active: number; disabled: number } | null>(null)
+  const [isIncreased, setIsIncreased] = useState<Record<string, boolean>>({})
+
   const total = data.length
   const disabled = data.filter(a => a.is_disabled).length
   const active = total - disabled
 
+  const currentStats = { total, active, disabled }
+
+  useEffect(() => {
+    if (prevStats) {
+      setIsIncreased({
+        total: currentStats.total > prevStats.total,
+        active: currentStats.active > prevStats.active,
+        disabled: currentStats.disabled > prevStats.disabled,
+      })
+    }
+    setPrevStats(currentStats)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data])
+
   const stats = [
     {
       icon: User,
       label: t('admins.total'),
       value: total,
       color: '',
+      key: 'total',
     },
     {
       icon: UserCheck,
       label: t('admins.active'),
       value: active,
       color: '',
+      key: 'active',
     },
     {
       icon: UserX,
       label: t('admins.disable'),
       value: disabled,
       color: '',
+      key: 'disabled',
     },
   ]
 
@@ -64,8 +84,15 @@ export default function AdminStatisticsSection({ data }: AdminsStatisticsProps)
               {React.createElement(stat.icon, { className: 'h-6 w-6' })}
               <span>{stat.label}</span>
             </div>
-            <span className="text-3xl font-bold" dir="ltr">
-              {numberWithCommas(stat.value)}
+            <span
+              className={cn(
+                'mx-2 text-3xl font-bold transition-all duration-500',
+                isIncreased[stat.key] ? 'animate-zoom-out' : ''
+              )}
+              style={{ animationDuration: '400ms' }}
+              dir="ltr"
+            >
+              <CountUp end={stat.value} />
             </span>
           </CardTitle>
         </Card>

dashboard/src/components/UsersStatistics.tsx

@@ -1,41 +1,11 @@
 import useDirDetection from '@/hooks/use-dir-detection'
 import { cn } from '@/lib/utils'
 import { useGetSystemStats } from '@/service/api'
-import { numberWithCommas } from '@/utils/formatByte'
 import { Users, Wifi } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Card, CardTitle } from './ui/card'
-
-const CountUp = ({ end, duration = 1500 }: { end: number; duration?: number }) => {
-  const [count, setCount] = useState(0)
-
-  useEffect(() => {
-    if (!end) return
-
-    let startTimestamp: number | null = null
-    const startValue = count
-    const step = (timestamp: number) => {
-      if (!startTimestamp) startTimestamp = timestamp
-      const progress = Math.min((timestamp - startTimestamp) / duration, 1)
-      // Using easeOutQuad for a softer animation
-      const eased = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
-      const currentCount = Math.floor(eased * (end - startValue) + startValue)
-
-      setCount(currentCount)
-
-      if (progress < 1) {
-        window.requestAnimationFrame(step)
-      } else {
-        setCount(end)
-      }
-    }
-
-    window.requestAnimationFrame(step)
-  }, [end, duration])
-
-  return <>{numberWithCommas(count)}</>
-}
+import { CountUp } from './ui/count-up'
 
 const UsersStatistics = () => {
   const { t } = useTranslation()

dashboard/src/components/ui/count-up.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { numberWithCommas } from '@/utils/formatByte'
+
+interface CountUpProps {
+  end: number
+  duration?: number
+}
+
+export const CountUp = ({ end, duration = 800 }: CountUpProps) => {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    if (!end && end !== 0) {
+      setCount(0)
+      return
+    }
+
+    let startTimestamp: number | null = null
+    const startValue = count
+    let animationFrameId: number | null = null
+
+    const step = (timestamp: number) => {
+      if (!startTimestamp) startTimestamp = timestamp
+      const progress = Math.min((timestamp - startTimestamp) / duration, 1)
+      // Using easeOutQuad for a softer animation
+      const eased = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+      const currentCount = Math.floor(eased * (end - startValue) + startValue)
+
+      setCount(currentCount)
+
+      if (progress < 1) {
+        animationFrameId = window.requestAnimationFrame(step)
+      } else {
+        setCount(end)
+      }
+    }
+
+    animationFrameId = window.requestAnimationFrame(step)
+
+    return () => {
+      if (animationFrameId !== null) {
+        window.cancelAnimationFrame(animationFrameId)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [end, duration])
+
+  return <>{numberWithCommas(count)}</>
+}
+