Implementing a Stop Effect in Vue with TypeScript

This challenge focuses on creating a reusable "stop effect" component in Vue.js using TypeScript. The stop effect will visually indicate when a process or action has been halted, providing clear feedback to the user and potentially preventing further actions. This is a common UI pattern for scenarios like form submissions, data loading, or any operation that can be interrupted.

Problem Description

You are tasked with building a StopEffect component in Vue.js that displays a visual indicator (a spinning stop sign) when a stopped prop is true. The component should also include a message prop that can be displayed below the stop sign, providing context for why the action has stopped. The component should be reusable and adaptable to different styling needs.

Key Requirements:

• stopped Prop: A boolean prop that controls the visibility of the stop sign and message. When true, the stop sign should be visible and spinning, and the message should be displayed. When false, the stop sign should be hidden, and the message should be hidden.
• message Prop: A string prop that displays a message explaining why the action has stopped. This message should only be visible when stopped is true.
• Visual Indicator: The component should use a visually recognizable stop sign icon (you can use a readily available icon library like Font Awesome or Material Icons, or a simple SVG). The stop sign should be animated to appear as if it's spinning when stopped is true.
• TypeScript: The component must be written in TypeScript, with proper type annotations for props and component state.
• Reusability: The component should be designed to be easily reusable in different parts of your application.

Expected Behavior:

• When the stopped prop is set to true, the stop sign should appear and begin spinning, and the message prop should be displayed.
• When the stopped prop is set to false, the stop sign should disappear, and the message should disappear.
• The component should handle cases where the message prop is an empty string or null gracefully (e.g., by not displaying anything).

Edge Cases to Consider:

• Initial state of stopped prop. Should the component be initially hidden or visible? (Assume initially hidden).
• Handling of different message lengths.
• Performance of the spinning animation (avoid excessive CPU usage).

Examples

Example 1:

Input: stopped=true, message="Submission failed due to validation errors."
Output: A spinning stop sign icon and the message "Submission failed due to validation errors." displayed below it.
Explanation: The component correctly displays the stop sign and message when stopped is true.

Example 2:

Input: stopped=false, message="Loading data..."
Output: The stop sign and message are hidden.
Explanation: The component correctly hides the stop sign and message when stopped is false.

Example 3:

Input: stopped=true, message=""
Output: A spinning stop sign icon is displayed, but the message is not.
Explanation: The component handles an empty message gracefully.

Constraints

• Component Size: The component should be relatively small and lightweight to minimize its impact on application performance.
• Animation Performance: The spinning animation should be smooth and not cause noticeable performance issues, even on lower-powered devices. Aim for a frame rate of at least 30fps.
• Icon Library: You are free to use any readily available icon library (Font Awesome, Material Icons, etc.) or create a simple SVG for the stop sign. Do not include the icon library itself in your submission; assume it is available.
• Vue Version: Assume Vue 3 and Composition API.

Notes

• Consider using CSS transitions or animations for the spinning effect.
• Think about how to make the component's styling customizable (e.g., through CSS variables or additional props).
• Focus on creating a clean, well-structured, and reusable component.
• Error handling is not required for this challenge. Assume the props will always be valid.
• You do not need to implement the actual triggering of the stopped state; this challenge is solely focused on the visual representation of the stop effect.