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.

Let your agent build it. The Ollie Shop skill ships with projects created by npx create-ollie-shop and knows which action types to watch for a given piece of UI.

Prompt

Disable my button while the cart is updating.

Don’t have the skill yet? Install it.

Import

import { usePendingActions } from '@ollie-shop/sdk';

Return Value

Property	Type	Description
`hasPendingActions`	`boolean`	Whether any checkout action is in progress
`pendingActions`	`ActionType[]`	The action types in progress. The same type can appear more than once when it was dispatched twice
`addActionNameForLoading`	`(action: ActionType, isEarly?: boolean) => void`	Marks an action as pending. Called for you by `useCheckoutAction`
`removeActionNameForLoading`	`(action: ActionType) => void`	Removes the first pending entry of that action. Called for you by `useCheckoutAction`

ActionType values

pendingActions can contain any action type of useCheckoutAction:

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
`SIMULATE_SESSION`	Running a checkout simulation
`CREATE_ORDER`	Placing the order
`CREATE_NEW_SESSION`	Starting a new cart
`REQUEST`	A custom request

How the list is cleared

The template uses the list to show skeletons and disable controls, so it never stays stuck:

An action is removed when it finishes, successfully or not.
The list is also cleared automatically after a short idle period, and shortly after a route or step change.

Treat hasPendingActions as “the checkout is busy right now”, not as an exact count.

Usage

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.

index.tsx
styles.module.css

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>
  );
}

.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;
  }
}

Notes

addActionNameForLoading and removeActionNameForLoading are called automatically by useCheckoutAction when actions start and complete. Call them yourself only for work of your own that should block the checkout the same way, and always remove what you add.
Use hasPendingActions for simple loading states, or filter pendingActions for more granular control.
Related: useCheckoutSession

Overview

Start Here

AI Coding Agents

Core Concepts

Customization

Ollie Studio

Functions

CLI Reference

Ollie SDK

Analytics & Scripts

Tools & Tips

Product updates

Import

Return Value

ActionType values

How the list is cleared

Usage

Example

Notes

​Import

​Return Value

​ActionType values

​How the list is cleared

​Usage

​Example

​Notes

Import

Return Value

ActionType values

How the list is cleared

Usage

Example

Notes