import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/functional-basic/Classes/Loading - Global Loading'/>

# Loading Class

A static class for managing global loading state (uses `LoadingInstance`). Uses a counter: loading is active as long as at least one process is showing it. Notifies listeners via the custom `ui-loading` event.

## Key Features

- **Nesting Counter** — multiple parallel `show()` calls are handled correctly: loading hides only after the same number of `hide()` calls.
- **Global Event** — when state changes, a `ui-loading` event is dispatched on the `window` object.
- **Listener Registration** — subscribe to state changes from any component via `registrationEvent`.

## State Management

- `is(): boolean` — returns `true` if loading is active (counter > 0).
- `get(): number` — returns the current counter value.
- `show(): void` — increments the counter by 1, notifies listeners.
- `hide(): void` — decrements the counter by 1. Ignored if counter is already 0.

## Event Subscription

### `registrationEvent`

Registers a listener for loading state changes. Works through the native `ui-loading` event on the `window` object.

**Parameters:**
- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — handler function receiving `event.detail.loading: boolean`.
- `element?: ElementOrString<HTMLElement>` — optional DOM element trigger: the listener automatically stops when the element is removed from the DOM.

### `unregistrationEvent`

Unregisters a listener previously added via `registrationEvent`.

**Parameters:**
- `listener: EventListenerDetail<CustomEvent, { loading: boolean }>` — the handler function used during registration.
- `element?: ElementOrString<HTMLElement>` — the DOM element used during registration.

## LoadingInstance
The `LoadingInstance` class can be used to create a separate instance for tracking loading.

## Example

```javascript
import { Loading } from '@dxtmisha/functional-basic'

Loading.registrationEvent((event) => {
  console.log('Loading:', event.detail.loading) // true or false
})

Loading.show()  // counter = 1
Loading.show()  // counter = 2
Loading.hide()  // counter = 1
Loading.hide()  // counter = 0 → event: { loading: false }
```
