How to Use Shopify App Bridge API to Load Shopify Admin Page in Shopify Remix App?

In this article, we learn how to use the Shopify app bridge API to load the Shopify admin page in the Shopify remix app.

Shopify App Bridge is a JavaScript library that allows you to build applications that will interact with the Shopify admin interface. It provides the tools for controlling things such as app navigation, modal dialogs, and resource loading, as well as other capabilities. The App Bridge API will let you interact with Shopify’s admin panel to add functionalities like buttons, loaders, etc. 

Steps to Use Shopify App Bridge API to Load Shopify Admin Page in Shopify Remix App:

To use App Bridge in your Shopify Remix app, you’ll need to follow these steps:

Use the following command to install the latest version of Shopify App Bridge:

npm install @shopify/app-bridge-react@latest

Write the following code in your route file to perform Shopify app bridge loading in your app.

//app.test.jsx

import React, { useState } from "react";

export default function Test(){
  const [loading, setLoading] = useState(false);

  // Function to simulate API call or any other async task
  const handleClick = () => {
    setLoading(true);  // Show loading spinner
    shopify.loading(true); // Trigger Shopify loading state

    // Simulate async task (like fetching data or submitting a form)
    setTimeout(() => {
      setLoading(false); // Hide loading spinner
      shopify.loading(false); // Stop Shopify loading state
    }, 5000); // Simulated delay (3 seconds)
  };

  return (
    <div>
      <button onClick={handleClick} disabled={loading}>
        {loading ? "Loading..." : "Click Me"}
      </button>

      {/* Optionally show a custom spinner */}
      {loading && <div className="spinner">Loading...</div>}
    </div>
  );
};

This React component is designed to simulate a loading state when a button is clicked. It shows a loading spinner while an asynchronous task (simulated with setTimeout) is running and disables the button during that time.

When clicked on, it invokes the handleClick function.

The loading state is set to true. It shows “Loading…..” text on the button and displays the spinner.

There’s a simulated delay of 5 seconds through the setTimeout function.

After 5 seconds, the loading state is reset to false and therefore makes the spinner disappear while making the button clickable again.

The shopify.loading(true) and shopify.loading(false) calls are to be used for managing the Shopify App Bridge loading state but must be properly integrated with Shopify’s App Bridge.

Conclusion:

By following the above steps you can easily load Shopify Admin Page in Shopify Remix App by using the Shopify App Bridge API. If you face any difficulty, share with me through the comment section. Stay with us for more such Shopify Remix solutions.

Happy Coding!