> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# usePendingActions

Use this hook when you need to track ongoing checkout actions and show loading states in your UI. It's useful for disabling buttons, showing spinners, or preventing user interactions while the checkout is processing.

## **Import**

```typescript theme={"system"}
import { usePendingActions } from '@ollie-shop/sdk';
```

## **Return Value**

| Property                     | Type                                              | Description                                                  |
| ---------------------------- | ------------------------------------------------- | ------------------------------------------------------------ |
| `hasPendingActions`          | `boolean`                                         | Whether there are any checkout actions currently in progress |
| `pendingActions`             | `ActionType[]`                                    | Array of action types currently being processed              |
| `addActionNameForLoading`    | `(action: ActionType, isEarly?: boolean) => void` | Adds an action to the pending list                           |
| `removeActionNameForLoading` | `(action: ActionType) => void`                    | Removes an action from the pending list                      |

### ActionType Values

The `pendingActions` array can contain any of these action types:

| ActionType                    | Description                   |
| ----------------------------- | ----------------------------- |
| `ADD_ITEMS`                   | Adding items to cart          |
| `REMOVE_ITEMS`                | Removing items from cart      |
| `UPDATE_ITEMS_QUANTITY`       | Updating item quantities      |
| `UPDATE_COUPONS`              | Applying or removing coupons  |
| `UPDATE_SHIPPING_PACKAGES`    | Selecting shipping options    |
| `UPDATE_SHIPPING_ADDRESSES`   | Updating shipping address     |
| `UPDATE_PAYMENT_METHODS`      | Selecting payment methods     |
| `UPDATE_GIFT_CARDS`           | Applying gift cards           |
| `UPDATE_CUSTOMER_DETAILS`     | Updating customer information |
| `UPDATE_CUSTOMER_PREFERENCES` | Updating customer preferences |

## **Usage**

```typescript theme={"system"}
const { hasPendingActions, pendingActions } = usePendingActions();

// Simple check for any pending action
if (hasPendingActions) {
  // Show loading state
}

// Check for specific actions
const isUpdatingCart = pendingActions.includes('UPDATE_ITEMS_QUANTITY');
```

## **Example**

A totalizer component that shows a loading skeleton while cart-related actions are processing.

<Tabs>
  <Tab title="index.tsx">
    ```typescript theme={"system"}
    import { usePendingActions, useCheckoutSession } from '@ollie-shop/sdk';
    import styles from './styles.module.css';

    const TOTALIZER_ACTIONS = [
      'UPDATE_ITEMS_QUANTITY',
      'REMOVE_ITEMS',
      'UPDATE_SHIPPING_PACKAGES',
      'UPDATE_PAYMENT_METHODS',
    ];

    function isUpdatingTotalizers(pendingActions: string[]): boolean {
      return pendingActions.some((action) =>
        TOTALIZER_ACTIONS.includes(action)
      );
    }

    function formatCurrency(value: number, currency: string, locale: string): string {
      return new Intl.NumberFormat(locale, {
        style: 'currency',
        currency,
      }).format(value / 100);
    }

    function CheckoutTotalizer() {
      const { session } = useCheckoutSession();
      const { pendingActions } = usePendingActions();

      const { totals, locale } = session;
      const isUpdating = isUpdatingTotalizers(pendingActions);

      const formatPrice = (price: number) =>
        formatCurrency(price, locale.currency, locale.language);

      return (
        <div className={styles.container}>
          <div className={styles.row}>
            <span>Items</span>
            {isUpdating ? (
              <span className={styles.skeleton} />
            ) : (
              <span>{formatPrice(totals.items)}</span>
            )}
          </div>
          <div className={styles.row}>
            <span>Shipping</span>
            {isUpdating ? (
              <span className={styles.skeleton} />
            ) : (
              <span>{formatPrice(totals.shipping ?? 0)}</span>
            )}
          </div>
          <div className={`${styles.row} ${styles.total}`}>
            <span>Total</span>
            {isUpdating ? (
              <span className={styles.skeletonLarge} />
            ) : (
              <span>{formatPrice(totals.total)}</span>
            )}
          </div>
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="styles.module.css">
    ```css theme={"system"}
    .container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .total {
      font-weight: 700;
    }

    .skeleton {
      display: inline-block;
      width: 64px;
      height: 16px;
      background-color: #e5e5e5;
      border-radius: 4px;
      animation: pulse 1.5s ease-in-out infinite;
    }

    .skeletonLarge {
      display: inline-block;
      width: 80px;
      height: 16px;
      background-color: #e5e5e5;
      border-radius: 4px;
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }
    ```
  </Tab>
</Tabs>

## **Notes**

* The `addActionNameForLoading` and `removeActionNameForLoading` functions are automatically called by [useCheckoutAction](/ollie-shop/api/useCheckoutAction) when actions start and complete
* Use `hasPendingActions` for simple loading states, or filter `pendingActions` for more granular control
* Related: [useCheckoutSession](/ollie-shop/api/useCheckoutSession)