diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index c90154a220..2aa5684ebf 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -580,6 +580,9 @@ export default class App extends React.Component {
                     if (!portalButton) {
                         const product = getProductFromId({site, productId: offer.tier.id});
                         const price = offer.cadence === 'month' ? product.monthlyPrice : product.yearlyPrice;
+                        this.dispatchAction('openPopup', {
+                            page: 'loading'
+                        });
                         this.dispatchAction('checkoutPlan', {plan: price.id, offerId});
                     } else {
                         this.dispatchAction('openPopup', {
@@ -611,7 +614,13 @@ export default class App extends React.Component {
             && pageQuery !== 'free'
         ) {
             removePortalLinkFromUrl();
-            this.dispatchAction('signup', {plan: queryPrice?.id || priceId});
+            const plan = queryPrice?.id || priceId;
+            if (plan !== 'free') {
+                this.dispatchAction('openPopup', {
+                    page: 'loading'
+                });
+            }
+            this.dispatchAction('signup', {plan});
         }
     }
 
diff --git a/ghost/portal/src/components/pages/LoadingPage.js b/ghost/portal/src/components/pages/LoadingPage.js
index 25784dcda6..2034812df0 100644
--- a/ghost/portal/src/components/pages/LoadingPage.js
+++ b/ghost/portal/src/components/pages/LoadingPage.js
@@ -1,11 +1,11 @@
+import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
 const React = require('react');
-
 export default class LoadingPage extends React.Component {
     render() {
         return (
             <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
-                <div style={{paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px'}}>
-                    Loading...
+                <div style={{paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px', height: '50px'}}>
+                    <LoaderIcon className={'gh-portal-loadingicon dark'} />
                 </div>
             </div>
         );