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:

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.set(true);
setTimeout(() => {
  loading.set(false);
}, 2000);

After you execute set(true), a loading progress bar will appear at the top of the page. The effect is as follows:

image.png

API methods​

set()​

(isLoading: boolean): void

Sets the loading state.

Parameters​

ParameterTypeDescriptionRequired
isLoadingbooleanWhether to show the loading state.
  • true: Shows the loading state.
  • false: Hides the loading state.
Yes

Example​

// Show the loading state.
loading.set(true);
// Hide the loading state.
loading.set(false);

get()​

(): boolean

Gets the current loading state.

Return value​

true if the loading state is shown, and false otherwise.

TIP

Calling the set(), toggle(), or legacy trigger() and exit() methods automatically updates the Loading instance state, allowing the app to accurately determine whether it is currently in the loading state.

Example​

// Check the current loading state.
if (loading.get()) {
  console.log('Loading...');
} else {
  console.log('Loading complete.');
}

toggle()​

(): void

Toggles the loading state (shows or hides it).

Example​

// Toggle the loading state.
loading.toggle();

trigger()​

(): void

Starts showing the loading state.

DEPRECATED

The trigger() method is deprecated. When writing new code, use set(true) instead to show the loading state.

Example​

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

exit()​

(): void

Ends and hides the loading state.

DEPRECATED

The exit() method is deprecated. When writing new code, use set(false) instead to hide the loading state.

Example​

// Hide the loading state.
loading.exit();

Examples​

Example 1: Data loading​

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.set(true);
  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.set(false);
  }
};
fetchProducts();

Example 2: Form save​

const handleSave = async (formData) => {
  // Show loading state.
  loading.set(true);
  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.set(false);
  }
};
Was this article helpful to you?
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
Legal
Privacy
Terms
Developer Agreement
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.