Create a Reusable Loading Spinner Component in React with TypeScript

Creating loading spinners is a common requirement in modern web applications. This challenge asks you to build a reusable React component that displays a visually appealing loading spinner while data is being fetched or a process is running. This component will enhance the user experience by providing clear feedback during potentially lengthy operations.

Problem Description

You need to create a React component named LoadingSpinner that displays a simple, visually engaging loading spinner. The component should accept a size prop (in pixels) to control the spinner's dimensions and a color prop (string) to customize its color. The spinner should be visually distinct and clearly indicate that content is loading. The component should be written in TypeScript and should be reusable across different parts of your application.

Key Requirements:

• Functional Component: Implement the component as a functional React component using TypeScript.
• Props: Accept size (number, default 16) and color (string, default '#007bff') props.
• Visual Representation: The spinner should be visually recognizable as a loading indicator. A simple rotating circle or dots are acceptable. CSS animations are preferred for the loading effect.
• Responsiveness: The spinner should scale appropriately based on the size prop.
• Reusability: The component should be easily reusable in different parts of your application without modification.

Expected Behavior:

• When the LoadingSpinner component is rendered, it should display a loading spinner animation.
• Changing the size prop should adjust the spinner's dimensions.
• Changing the color prop should change the spinner's color.
• The component should not render any content if neither size nor color are provided (though defaults should be used).

Edge Cases to Consider:

• Invalid size values (e.g., negative numbers, non-numeric values). The component should gracefully handle these by using the default size.
• Empty or invalid color values. The component should use the default color.

Examples

Example 1:

Input: <LoadingSpinner size={32} color="red" />
Output: A 32x32 pixel red loading spinner.
Explanation: The component renders a spinner with the specified size and color.

Example 2:

Input: <LoadingSpinner />
Output: A 16x16 pixel blue loading spinner (using default values).
Explanation: The component renders a spinner with the default size and color.

Example 3:

Input: <LoadingSpinner size="abc" color={123} />
Output: A 16x16 pixel blue loading spinner (using default values).
Explanation: Invalid size and color values are handled gracefully, defaulting to the standard values.

Constraints

• Size: The size prop should be a number between 8 and 100 pixels (inclusive). Values outside this range should default to 16.
• Color: The color prop should be a valid CSS color string (e.g., "red", "#FF0000", "rgb(255, 0, 0)").
• Performance: The spinner animation should be efficient and not cause noticeable performance issues. Avoid complex or resource-intensive animations.
• Dependencies: You are allowed to use standard CSS or a simple CSS-in-JS library (like styled-components or emotion) for styling. Avoid external animation libraries for this challenge.

Notes

• Consider using CSS animations or transitions to create the loading effect.
• Think about how to make the component visually appealing and easy to understand.
• Focus on creating a reusable and well-structured component.
• You can use any React hooks you deem necessary.
• The visual design of the spinner is up to you, but it should clearly indicate loading.