How to Use App Bridge Loading API Instead of Deprecated Loading Component For Shopify Remix App?

Hello Shopify Friends,

Welcome to another MageComp’s Shopify/Remix technical blog.

In today’s technical blog, we will present you a comprehensive guide on using the App Bridge Loading API effectively. It is a robust and modern solution that acts as a superior alternative to the loading component that was previously used in Shopify Remix applications.

In this guide, we will teach you the step-by-step process of implementing this API, ensuring your app’s enhanced user experience by providing smooth transitions during loading phases.

Steps to Use App Bridge Loading API

Step 1: Check if you have updated to support app bridge version.

For using the Shopify app bridge loading api, first, you need to check that you have updated to the supported app bridge version.

It will be shown in package.json, so kindly make sure to check it in that file.

Step 2: Create Code File for it.

After checking the app bridge api version, you need to generate a code file that will be executed in the app.

Here is the code example :

import React, { useEffect } from "react";
import { useAppBridge } from '@shopify/app-bridge-react';

export default function Index() {
	const shopify = useAppBridge(); 
	useEffect(() => {
		const interval = setInterval(() => {
		shopify.loading(true);
		// Add your logic here 
		setTimeout(() => {
			shopify.loading(false);
		}, 3000); // this is 3 sec interval for testing.
	}, 3000);
	return () => clearInterval(interval);
}, [shopify]);
return (
	<>
		Demo content will be executed after loading.
	</>
);
};

Explanation

By using this code given above, you can seamlessly integrate the Shopify App Bridge API, allowing smooth and efficient loading experiences. The elegant Shopify loading animation allows you to replace traditional spinning icons with modern visual sophistication throughout your application.

Conclusion

By following the steps, you can easily embed the Shopify App Bridge API, helping you achieve seamless loading performance.

With this, your app gains an attractive visual style through the sophisticated loading animation from Shopify that replaces traditional spinning icons. This offers your app numerous advantages that boost user interaction, along with boosting system performance.

Hope you found this technical guide helpful. If you have any queries, contact our Shopify experts and get your queries solved.

Thank you for reading!