Super Qi LogoMiniapps Docs
UI APIs

showLoading / hideLoading

Display and dismiss a loading indicator dialog.

Overview

my.showLoading displays a loading indicator dialog, typically used during asynchronous operations. my.hideLoading dismisses the loading dialog when the operation completes.

Always pair my.showLoading with my.hideLoading to ensure the loading indicator is properly dismissed. The loading dialog blocks user interaction until it's hidden.

my.showLoading

Show the loading dialog.

Sample Code

my.showLoading({
  content: 'loading...',
  delay: 1000,
});

Parameters

PropertyTypeRequiredDescription
contentStringNoText contents of loading.
delayNumberNoDisplaying delay, in ms, 0 by default. If my.hideLoading was called before this time, it is not displayed.
successFunctionNoCallback function upon call success.
failFunctionNoCallback function upon call failure.
completeFunctionNoCallback function upon call completion (to be executed upon either call success or failure).

my.hideLoading

Hide the loading dialog.

Sample Code

my.hideLoading();

Example with page context:

// Show loading on page load
window.onload = function() {
  my.showLoading();

  setTimeout(() => {
    my.hideLoading({
      page: this, // Prevents switching to other pages when execution
    });
  }, 4000);
}

Parameters

PropertyTypeRequiredDescription
pageObjectNoSpecifically it means the current page instance. In some scenarios, it is required to specify the exact page for hideLoading.

Usage Notes

  • Delay behavior: If delay is set and my.hideLoading is called before the delay expires, the loading indicator will not be displayed at all
  • Page context: Use the page parameter in my.hideLoading when you need to ensure the loading is dismissed on a specific page instance
  • Modal behavior: The loading dialog blocks user interaction while displayed
  • Pairing: Always call my.hideLoading() after my.showLoading() to avoid blocking the UI indefinitely

Complete Example

Basic Loading Flow

// Show loading
my.showLoading({
  content: 'Processing...',
});

// Perform async operation
setTimeout(() => {
  // Hide loading when done
  my.hideLoading();

  my.alert({
    title: 'Complete',
    content: 'Operation finished successfully',
  });
}, 2000);

With Delay

my.showLoading({
  content: 'Loading data...',
  delay: 500, // Only show if operation takes longer than 500ms
});

// Fetch data
fetchData().then(() => {
  my.hideLoading();
});

With Page Context

// Show loading on page load
window.onload = function() {
  my.showLoading({
    content: 'Loading...',
  });

  // Simulate async operation
  setTimeout(() => {
    my.hideLoading({
      page: this, // Ensures hideLoading targets correct page instance
    });
  }, 3000);
}

Fetch Data Example

function loadData() {
  my.showLoading({
    content: 'Loading data...',
  });

  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      // Update your UI with data
      updateUI(data);
      my.hideLoading();
    })
    .catch(error => {
      my.hideLoading();
      my.alert({
        title: 'Error',
        content: 'Failed to load data',
      });
    });
}

Related Links

showActionSheet

Display an action sheet menu with multiple options for user selection.

showToast / hideToast

Display and dismiss a toast notification with optional icon.