# Spinner


## Examples

### Default

```html
<m-spinner></m-spinner>
```

### Sizes

```html
<m-stack direction="horizontal" spacing="m" alignment="center">
      <m-spinner size="s"></m-spinner>
      <m-spinner size="m"></m-spinner>
      <m-spinner size="l"></m-spinner>
      <m-spinner size="xl"></m-spinner>
    </m-stack>
```

### InButton

```html
<m-button variant="primary">
      Loading
      <m-spinner slot="end"></m-spinner>
    </m-button>
```

## Usage

**Use the Loading Spinner to:**

- Indicate asynchronous actions, such as fetching data from an API.
- Show progress when a process takes more than a second.
- Prevent users from interacting with UI elements while waiting for a response.
- Provide feedback when loading components dynamically in a lazy-loading scenario.

**Do not use the Loading Spinner to:**
- Indicate progress for long-running actions (use a progress bar if the duration is predictable).
- Replace skeleton screens where content placeholders would be more appropriate.
- Block the entire page unless necessary—prefer inline spinners for non-critical loading states.

## Use case examples

- Submitting a job application, approving a request.
- Updating a salary breakdown, filtering a job listing.
- Loading a user dashboard after login.
- Saving user settings in a modal.

## Other Considerations

- Avoid unnecessary loading indicators—if a process is fast, the spinner can feel disruptive.
- If possible, use progressive loading (e.g., show part of the UI while the rest loads).
- Avoid excessive animations that may feel distracting.

## Design Rationale
- Instant Feedback: Prevents users from wondering if an action was registered.
- Guides User Expectations: Helps manage perception of system performance.
- Consistent Interaction Model: Standardized loading behavior across different UI elements.
- Enhances Usability: Ensures users don’t take unintended actions while waiting.
- Lightweight and optimized for performance (CSS-based preferred).
- Match the UI theme (size, color, and speed).