Fix animation hooking not being robust enough locally

src/common/anim/Animator.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 
 import "@src/common/anim/Animator.scss";
-import { useEffectRefsPopulated } from "@src/common/hooks/useEffectRefsPopulated";
+import { useRefsPopulatedEffect } from "@src/common/hooks/useRefsPopulatedEffect";
 import { useCallback } from "react";
 
 type AnimationContext = {
@@ -121,7 +121,7 @@ export function Anim(
   const selfRef = useRef<HTMLDivElement>(null);
   const animationState = useContext(animContext);
 
-  useEffectRefsPopulated(() => {
+  useRefsPopulatedEffect(() => {
     const setups = props.setup(selfRef.current!);
 
     const anims = setups
@@ -168,7 +168,7 @@ export function Anim(
 
       anims.forEach((anim) => anim.cancel());
     };
-  }, [selfRef.current]);
+  }, [selfRef]);
 
   return (
     <div ref={selfRef} className="anim">

src/common/hooks/useRefsPopulatedEffect.ts

@@ -0,0 +1,32 @@
+import { useRef } from "react";
+import { EffectCallback, useEffect } from "react";
+
+export function useRefsPopulatedEffect(
+  callback: EffectCallback,
+  refs: React.MutableRefObject<any>[]
+) {
+  const refData = useRef({
+    intervalIdx: 0,
+    effectRan: false,
+    cleanup: (() => {}) as ReturnType<EffectCallback>,
+  });
+
+  useEffect(() => {
+    if (!refData.current.effectRan) {
+      refData.current.intervalIdx = setInterval(() => {
+        if (!refData.current.effectRan && refs.every((ref) => ref.current)) {
+          refData.current.cleanup = callback();
+          refData.current.effectRan = true;
+          clearInterval(refData.current.intervalIdx);
+        }
+      }, 1);
+    }
+
+    return () => {
+      clearInterval(refData.current.intervalIdx);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      refData.current.cleanup?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}