update the loading issue

src/components/logisticsbrain/LogisticsBrainSection.tsx

@@ -2,18 +2,26 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { motion, useMotionValue, useMotionValueEvent, useTransform, type MotionValue } from "framer-motion";
+import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { P, STRATEGIES, ENGINE_STEPS, CONSTRAINT_LIST, STRATEGY_SCORES } from "./theme";
 
 const LogisticsBrainCanvas = dynamic(() => import("./LogisticsBrainCanvas"), { ssr: false });
 
-/** Rounds a MotionValue to an integer for the animated stat counters. */
+/** Rounds a MotionValue to an integer for the animated stat counters.
+ *  Writes to the DOM imperatively so it never triggers a setState during the
+ *  parent's render (which `useTransform` emits synchronously on re-render). */
 function Counter({ mv }: { mv: MotionValue<number> }) {
-  const [v, setV] = useState(0);
-  useMotionValueEvent(mv, "change", (x) => setV(Math.round(x)));
-  return <>{v}</>;
+  const ref = useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    const write = (x: number) => {
+      if (ref.current) ref.current.textContent = String(Math.round(x));
+    };
+    write(mv.get());
+    return mv.on("change", write);
+  }, [mv]);
+  return <span ref={ref}>{Math.round(mv.get())}</span>;
 }
 
 /** Active step index from scroll progress (−1 before the engine starts). */