> For the complete documentation index, see [llms.txt](https://docs.digitalriver.com/salesforce-lightning/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalriver.com/salesforce-lightning/salesforce-lightning-b2b-commerce-app-2.0/extend-the-salesforce-lightning-app/add-a-spinner-component-lwr-only.md).

# Add a spinner component (LWR only)

With the LWR checkout improvements, you will notice that transitions between sections happen quickly. While this is a good thing, it can lead to errors when asynchronous processes try to update the cart simultaneously. To avoid this, you can include a spinner overlay component on your implementation that disables the page during specific component actions. The shopper cannot edit other parts of the page when this occurs.

The following attached spinner component is provided as a working sample; however, it must be updated to meet your requirements.

{% file src="/files/oCXSETFJjFwdVdJJDEEG" %}

As provided, the component listens for specific events and enables or disables the spinner overlay based on these events. The Digital River checkout components publish these events. You may also modify the component to listen for your custom events. The Digital River components publish the following events:

* paymentsIsProcessing
  * Fired during loading the payment component.
  * Fired during payment source attachment to checkout.
* taxIdentifierIsProcessing
  * Fired during the loading of the tax identifier component.
  * Fired during the adding or removal of tax identifiers to the checkout.
* isPlacingOrder
  * Fired during the DR order placement and salesforce cart-to-order conversion process.

Suppose you have implemented the customer credit extension. In that case, Digital River recommends that you fire events to enable or disable the spinner while adding or removing customer credit sources to checkout and while your component is loading. All of these actions result in modifications of the cart.

After modifying to meet your requirements, deploy the spinner component to your org. To place the component in the checkout:

1. Navigate to Experience Builder for your site.
2. Go to the Checkout page.
3. Drag and drop the component to the page. Ensure that the component is placed in Column 1 at the same level as the Checkout Accordion component, as shown in the screenshot below. The spinner component can be before or after the Checkout Layout: Accordion component, but it must be at the same level as shown.\
   \
   ![](/files/V2t48Nt86DdtyiucjOv1)\
   \
   **Important**:  If the component is not placed at the correct level in Experience Builder, it may not work as intended.
4. Publish the site.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.digitalriver.com/salesforce-lightning/salesforce-lightning-b2b-commerce-app-2.0/extend-the-salesforce-lightning-app/add-a-spinner-component-lwr-only.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.