---
title: "Loading"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/apps/development-tool/app-bridge/actions/loading'
  md: 'https://developer.shopline.com/docs/apps/development-tool/app-bridge/actions/loading.md'
---
# Loading

Loading is a component for displaying a global loading state. By showing a progress bar animation at the top of the SHOPLINE Admin, it informs merchants that the app is processing a request or loading data. This helps effectively manage expectations, letting merchants know the app's response status and preventing uncertainty due to waiting.

## Quick start

The following example demonstrates the basic implementation of the Loading component:

```javascript
import Client, { Loading, shared } from '@shoplineos/app-bridge';

// 1. Initialize App Bridge.
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});

// 2. Create a Loading instance.
const loading = Loading.create(app);

// 3. Show loading state.
loading.trigger();

setTimeout(() => {
  loading.exit();
}, 2000);
```

After you call the `trigger()` method, a loading progress bar will appear at the top of the page. The effect is as follows:

![](https://s2cdn.myshopline.com/slfs/op-new/177329734557640/1770643442178-f5ec3606-ffcc-451e-9d08-f8fbc64e22fa.png)

## API methods

### trigger()

```typescript
(): void
```

Starts showing the loading state.

#### Example

```javascript
// Show loading state.
loading.trigger();
```

---

### exit()

```typescript
(): void
```

Ends and hides the loading state.

#### Example

```javascript
// Hide loading state.
loading.exit();
```

---

## Examples

### **Example 1: Data loading**

```javascript
import Client, { Loading, shared } from '@shoplineos/app-bridge';

const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});

const loading = Loading.create(app);

// Load product data.
const fetchProducts = async () => {
  // Show loading state.
  loading.trigger();

  try {
    const response = await fetch('/api/products');
    const products = await response.json();

    // Process data.
    console.log('Product data:', products);
  } catch (error) {
    console.error('Loading failed:', error);
  } finally {
    loading.exit();
  }
};

fetchProducts();
```

### **Example 2: Form save**

```javascript
const handleSave = async (formData) => {
  // Show loading state.
  loading.trigger();

  try {
    // Submit form data.
    await saveProduct(formData);

    // Save was successful.
    console.log('Save successful.');
  } catch (error) {
    // Save failed.
    console.error('Save failed:', error);
  } finally {
    // End loading state.
    loading.exit();
  }
};
```

## Important notes

### Always use `trigger()` and `exit()` together

Every call to `trigger()` must be followed by a corresponding call to `exit()`. Otherwise, the loading state will persist, negatively impacting the user experience.

```javascript
// Recommended: Use try-finally to ensure that exit() is called.
const loadData = async () => {
  loading.trigger();

  try {
    await fetchData();
  } finally {
    loading.exit(); // Execute regardless of success or failure.
  }
};
```

### Avoid repeated use

Do not call `trigger()` repeatedly when the loading state is already showing, as this may prevent the loading state from closing correctly.

```javascript
// Not recommended: Repeated use
loading.trigger();
loading.trigger(); // Avoid repeated calls.
loading.exit(); // May not close correctly.

// Recommended: Use a flag for control
let isLoading = false;

const loadData = async () => {
  if (isLoading) return;

  isLoading = true;
  loading.trigger();

  try {
    await fetchData();
  } finally {
    loading.exit();
    isLoading = false;
  }
};
```