From b2827b3d9fb851fc36dd4c986516f061b64a61a2 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Tue, 2 Nov 2021 19:35:29 +0530
Subject: [PATCH] Added loading screen while opening direct Stripe checkout

refs https://github.com/TryGhost/Team/issues/1184

When Portal tries to open Stripe checkout directly without any popup UI, since the time taken by checkout session to open can be few seconds it can cause invisible delay on the screen for user which is confusing. This change adds a loading popup while Stripe checkout session is loaded
---
 ghost/portal/src/App.js                          | 11 ++++++++++-
 ghost/portal/src/components/pages/LoadingPage.js |  6 +++---
 2 files changed, 13 insertions(+), 4 deletions(-)

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>
         );