Issue while redirecting to Billing approval page in remix embedded application.

The bug

So basically I am working on an application and I have implemented the billing api successfully. It was working fine earlier but recently I started to get an issue. As soon as the user lands on my application just after the installation, it automatically gets redirected to billing page if he has no current active subscriptions. But during that redirection, I encounter an error (please refer to image below)

But after a second or two, it gets redirected to billing page without me refreshing the page. This would not be an issue if the user uses the application with their desktop or laptop but if he tries to access the application from the mobile app. He will encounter below error.

I have added the code snippet below

`import { authenticate, MONTHLY_PLAN } from "../shopify.server";
export const loader = async ({ request }: any) => {
  const { billing, session } = await authenticate.admin(request);
  let { shop } = session;
  let myShop = shop.replace(".myshopify.com", "");

  await billing.require({
    plans: [MONTHLY_PLAN],
    onFailure: async () =>
      billing.request({
        plan: MONTHLY_PLAN,
        isTest: true,
        returnUrl: `https://admin.shopify.com/store/${myShop}/apps/${process.env.APP_NAME}/`,
      }),
  });

  return null;
};`

Inside app._index.tsx

//Run the active subscription qiery to  get current status of user's subscription
export async function loader({ request }: any) {
  const { session, admin, redirect } =
    await authenticate.admin(request);
  let { shop } = session;

  try {
    const result = await admin.graphql(

    #graphql
      query Shop {
        app {
          installation {
            launchUrl
            activeSubscriptions {
              id
              name
              createdAt
              returnUrl
              status
              currentPeriodEnd
              trialDays
            }
          }
        }
      }
    `,
      { variables: {} },
    );

    const resultJson = await result.json();
    const activeSubscriptions = resultJson.data.app.installation;

    //If there are no current active susbcription, the user will automatically will be redirected to billing page
    if (activeSubscriptions.activeSubscriptions.length < 1) {
      return redirect("/app/buyPro");
    }
    return { activeSubscriptions, shop };
  } catch (error: any) {
    throw error;
  }
}

Expected behaviour

What I want is as soon as the user comes to our application just after the installation, I want them to redirect to billing approval page. As I mentioned this works fine if we use the application on the PC. It should work for mobile application as well.

Relevant packages I am using, and their versions.

"@prisma/client": "^5.8.0", "@remix-run/dev": "^2.0.0", "@remix-run/node": "^2.0.0", "@remix-run/react": "^2.0.0", "@remix-run/serve": "^2.0.0", "@shopify/app": "^3.50.0", "@shopify/app-bridge": "^3.7.10", "@shopify/cli": "^3.50.0", "@shopify/polaris": "^12.0.0", "@shopify/polaris-icons": "^8.8.0", "@shopify/shopify-api": "^9.2.0", "@shopify/shopify-app-remix": "^2.5.0", "@shopify/shopify-app-session-storage-prisma": "^3.0.0", "axios": "^1.6.7", "isbot": "^4.1.0", "prisma": "^5.8.0",

Shopify / shopify-app-bridge