feat(don): fix flicking by calculating size only once

app/widget/donate/top/page.tsx

@@ -9,6 +9,7 @@ type Data = Awaited<ReturnType<typeof getTopDonate>>;
 export default function TopDonateWidget() {
   const [top, setTop] = useState<Data>();
   const textRef = useRef<HTMLDivElement | null>(null);
+  const stableSize = useRef<Record<string, number>>({});
 
   useEffect(() => {
     async function update() {
@@ -27,13 +28,21 @@ export default function TopDonateWidget() {
     if (!textRef.current) return;
     var fontSize = 48,
       count = 0;
-    const el = textRef.current;
+    const el = textRef.current,
+      key = `${top?.name}${top?.amount}`;
+    if (stableSize.current[key]) {
+      el.style.fontSize = `${stableSize.current[key]}px`;
+      return;
+    }
     const interval = setInterval(() => {
       console.log(el.scrollWidth, el.clientWidth);
       fontSize = (fontSize * el.clientWidth) / el.scrollWidth;
       el.style.fontSize = `${fontSize}px`;
       count++;
-      if (count > 20) clearInterval(interval);
+      if (count > 20) {
+        stableSize.current[key] = fontSize;
+        clearInterval(interval);
+      }
     }, 100);
     return () => clearInterval(interval);
   }, [textRef, top]);

components/ui/navigation-menu.tsx

@@ -113,7 +113,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
           className,
         )}
         {...props}
@@ -146,7 +146,7 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
         className,
       )}
       {...props}