React Skeleton Loader Component

Creating a skeleton loader is a common practice in modern web development to improve user experience while data is being fetched. A skeleton loader provides a visual indication that content is loading, preventing users from perceiving the application as frozen or unresponsive. This challenge asks you to implement a reusable React component that displays a visually appealing skeleton loader.

Problem Description

You are tasked with building a SkeletonLoader component in React using TypeScript. This component should accept a children prop, which represents the structure of the content that will eventually be loaded. The SkeletonLoader component should render placeholder elements (rectangles) mimicking the layout and dimensions of the children prop, creating a visual skeleton of the content. The component should be flexible enough to handle various HTML elements and their nested structures.

Key Requirements:

• Mimic Layout: The skeleton loader should accurately reflect the layout of the content it's replacing. This includes the position and size of elements.
• Placeholder Elements: Use rectangular placeholders to represent the missing content.
• Reusability: The component should be reusable across different parts of the application.
• TypeScript: The component must be written in TypeScript.
• Children Prop: The component should accept a children prop to define the structure of the content to be loaded.

Expected Behavior:

When the SkeletonLoader component is rendered, it should display a skeleton representation of the content defined by its children prop. Once the actual content is loaded, the SkeletonLoader should be replaced with the actual content.

Edge Cases to Consider:

• Empty Children: Handle the case where the children prop is empty or null. A simple, minimal skeleton should be displayed.
• Complex Nested Structures: The component should gracefully handle complex nested HTML structures.
• Different Element Types: The component should work with various HTML elements (divs, paragraphs, headings, etc.).
• Styling: Consider how styling can be applied to the skeleton loader (e.g., color, animation). While full styling isn't required, the component should be easily styleable.

Examples

Example 1:

Input: <SkeletonLoader><h1>Title</h1><p>Some content here.</p></SkeletonLoader>
Output: A skeleton loader displaying a rectangle representing the `<h1>` and another rectangle representing the `<p>`.
Explanation: The component analyzes the structure of the `children` (an `<h1>` and a `<p>`) and renders rectangles with the appropriate dimensions and layout.

Example 2:

Input: <SkeletonLoader><div><p>Inner content</p><span>Another inner element</span></div></SkeletonLoader>
Output: A skeleton loader displaying a rectangle representing the outer `<div>`, and within it, rectangles representing the `<p>` and `<span>`.
Explanation: The component recursively traverses the `children` to create a nested skeleton structure.

Example 3: (Edge Case - Empty Children)

Input: <SkeletonLoader></SkeletonLoader>
Output: A single, small rectangle.
Explanation: When no children are provided, a default skeleton is rendered.

Constraints

• Component Structure: The component must be a functional React component using TypeScript.
• Rendering: The component must use React's rendering capabilities to display the skeleton elements.
• Performance: While not a primary focus, avoid unnecessary re-renders. Consider using React.memo if appropriate.
• No External Libraries: Do not use external libraries for this challenge (e.g., skeleton loader libraries). The goal is to implement the logic yourself.

Notes

• You can use React.cloneElement to create placeholder elements that mimic the structure of the original elements.
• Consider using CSS to style the skeleton elements (e.g., background color, border radius).
• Think about how to handle different HTML attributes (e.g., className, style) when creating the skeleton elements. You don't need to perfectly replicate all attributes, but consider how to handle common ones.
• Focus on creating a component that accurately represents the layout of the content, even if the styling is minimal.