noob-components/.trellis/spec/plugs-composables/use-loading.md

# useLoading

> Loading overlay management using Element Plus ElLoading service.

## Purpose

Provides a simple wrapper around Element Plus loading service with sensible defaults.

## Signature

```typescript
export function useLoading(): {
  showLoading: (options?: ElLoadingOptions) => ElLoadingInstance;
}
```

## Usage Pattern

```typescript
// Example: plugs/composables/useLoading.ts
import { useLoading } from "plugs/composables";

const { showLoading } = useLoading();

// Basic usage with defaults
const loading = showLoading();

// Custom options
const loading = showLoading({
  lock: true,
  text: "Processing...",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.5)",
});
```

## Default Options

```typescript
{
  lock: true,
  text: "Loading",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.3)",
}
```

## Dependencies

- `element-plus` - `ElLoading`

## Note

This is a thin wrapper. For complex loading states, consider managing loading state manually with `ref<boolean>` and conditional rendering.