I'm using the react-loading-skeleton and I'm trying to create a reusable component on top of the <Skeleton /> component of this library.

The reason that I'm trying to create something like this is because I don't like the approach of react-loading-skeleton, which is something like this:

<div>
    <h1>{props.title || <Skeleton />}</h1>
    {props.body || <Skeleton count={10} />}
</div>

I think the code would get hard to understand and repetitive.

My idea is to create a custom JSX component that has the following props:

1. Component - To render the component when the skeleton is not needed
2. condition - To check if it should render the component or the skeleton
3. skeletonCount - just a prop of the skeleton library
4. ...props - to receive all the additionals props that Component may have.

I wanna know if this is a good approach because I was getting some typescript errors related to ...props.

This is the component:

import React from 'react';
import Skeleton from 'react-loading-skeleton';
import type { SkeletonProps } from './types';

export const SkeletonHandler: React.FC<SkeletonProps> = ({
  Component,
  condition,
  skeletonCount,
  ...props
}) => {
  return condition ? (
    <Component {...props} />
  ) : (
    <Skeleton count={skeletonCount} />
  );
};

My types.ts:

export type SkeletonProps = {
  Component: React.JSXElementConstructor<any>; //idk if this is the correct type to use tbh.
  skeletonCount: number;
  condition: boolean;
};

Usage:

<SkeletonHandler Component={TierTitle} variant="h4" color="black" bold>
  {clientName}
</SkeletonHandler>

PS: variant, color, bold and client name are all values that were in the component.

Please, let me know if there is a better way of solving this problem.