I want to render a skeleton while a data variable is undefined. Here is my first approach:

import { Skeleton } from "@/components/ui/skeleton";

type SkeletonSkinProps<T> = {
  className: string;
  children: React.ReactNode;
  data: T | undefined;
};

export default function SkeletonSkin<T>({
  data,
  className,
  children,
}: SkeletonSkinProps<T>) {
  return data ? children : <Skeleton className={className} />;
}

<SkeletonSkin className="aspect-square h-8 w-8 rounded-full" data={user}>
  <img
    src={user?.photoURL}
    className="aspect-square h-8 cursor-pointer select-none rounded-full object-cover"
    alt="blank profile"
  />
</SkeletonSkin>

Here is my second approach:

import { Skeleton } from "@/components/ui/skeleton";

type SkeletonSkinProps<T> = {
  className: string;
  children: (data: T) => React.ReactNode;
  data: T | undefined;
};

export default function SkeletonSkin<T>({
  data,
  className,
  children,
}: SkeletonSkinProps<T>) {
  return data ? children(data) : <Skeleton className={className} />;
}

<SkeletonSkin className="aspect-square h-8 w-8 rounded-full" data={user}>
  {(data) => (
    <img
      src={data.photoURL}
      className="aspect-square h-8 cursor-pointer select-none rounded-full object-cover"
      alt="blank profile"
    />
  )}
</SkeletonSkin>

The second approach seems to have some boilerplate but is much safer. I wonder if it’s unnecessarily safe.

Which approach is better, and is the second one over-engineered?