to-animate.tsx

import { useRef, useEffect, useState } from "react";
import { animateLayout } from "./animate-layout.helper";
import type { AnimateLayoutProps } from "./animate-layout.types";

useMetadata({
  rsc: {
    componentType: "client",
  },
});

export default function AnimateLayout(props: AnimateLayoutProps) {
  const [isShown, setIsShown] = useState<boolean>(false);
  let parentRef = useRef<HTMLDivElement>(null);

  function hide(el) {
    setIsShown(false);
    el.style.display = "none";
  }

  useEffect(() => {
    if (parentRef.current) {
      animateLayout(parentRef.current);
    }
  }, []);

  useEffect(() => {
    return () => {
      if (parentRef.current) {
        hide(parentRef.current);
      }
    };
  });

  useEffect(() => {
    if (parentRef) {
      setIsShown(true);
      animateLayout(parentRef);
    }
  }, [parentRef.current, props.children]);

  return (
    <div
      ref={parentRef}
      className={props.className}
      style={{
        display: isShown ? "block" : "none",
        backfaceVisibility: "hidden",
      }}
    >
      {props.children}
    </div>
  );
}