Skeleton Loader for Content

Objective: Implement a skeleton loader for content while waiting for an API response.

Example how it looks: Link ->

Instructions:

1. Create a component named ContentWithSkeleton (or if you are not using React just create an HTML element).

2. The component should fetch data from any public API of your choice (or use https://jsonplaceholder.typicode.com/posts/1 as a default).

3. Display a skeleton loader while the data is being fetched. Once the data is fetched, replace the skeleton with the actual content.

4. Ensure that the skeleton loader is styled to resemble the structure of the content it will replace (e.g., rectangles for text blocks).

Requirements:

• Fetch data when the component or page loads.
• Manage loading, error, and success states to ensure the skeleton is replaced by actual content once the data is retrieved.

Hints:

1. Use CSS to style the skeleton loader to simulate the final content structure (e.g., gray boxes representing text or images).
2. Handle different states:
   • Loading (display skeleton).
   • Success (display actual content).
   • Error (display an error message if the API call fails).

Bonus:

• Add animations to the skeleton loader, such as a shimmer effect, to simulate loading.
• Handle errors, showing an error message if the API call fails or changing skeleton style.