fix(header): restore github stars count animation without flicker

Author: ViktorSvertoka

frontend/components/shared/GitHubStarButton.tsx

@@ -2,7 +2,7 @@
 
 import { Star } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const STORAGE_KEY = 'github-stars';
 
@@ -22,14 +22,18 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
   const t = useTranslations('aria');
   const [displayCount, setDisplayCount] = useState(0);
   const [finalCount, setFinalCount] = useState<number | null>(null);
+  const displayCountRef = useRef(displayCount);
   const githubUrl = 'https://github.com/DevLoversTeam/devlovers.net';
 
+  useEffect(() => {
+    displayCountRef.current = displayCount;
+  }, [displayCount]);
+
   useEffect(() => {
     const cachedStars = getStoredStars();
 
     if (cachedStars !== null) {
       const frame = window.requestAnimationFrame(() => {
-        setDisplayCount(cachedStars);
         setFinalCount(cachedStars);
       });
 
@@ -66,12 +70,13 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
   }, []);
 
   useEffect(() => {
-    if (finalCount === null || finalCount === displayCount) return;
+    if (finalCount === null || finalCount === displayCountRef.current) return;
 
     const duration = 2000;
     const steps = 60;
-    const increment = finalCount / steps;
-    let current = 0;
+    const start = displayCountRef.current;
+    const increment = Math.max((finalCount - start) / steps, 1);
+    let current = start;
 
     const timer = setInterval(() => {
       current += increment;
@@ -87,7 +92,7 @@ export function GitHubStarButton({ className = '' }: GitHubStarButtonProps) {
     }, duration / steps);
 
     return () => clearInterval(timer);
-  }, [displayCount, finalCount]);
+  }, [finalCount]);
 
   const formatStarCount = (count: number): string => {
     return count.toLocaleString();