From da7aee7003b2c5bf70ad4b94f0b2d774a54b9c7b Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Tue, 13 Oct 2020 13:27:32 +0530
Subject: [PATCH] Added loader icon for edit billing update

no issue

- Adds loading indicator for Billing update button while it waits to create and load stripe session
---
 ghost/portal/src/components/pages/AccountHomePage.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 2cc481c741..be6a8a3bcb 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -5,6 +5,8 @@ import CloseButton from '../common/CloseButton';
 import Switch from '../common/Switch';
 import {getMemberSubscription, hasOnlyFreePlan, isComplimentaryMember} from '../../utils/helpers';
 import {getDateString} from '../../utils/date-time';
+import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
+import {useContext} from 'react';
 
 const React = require('react');
 
@@ -155,16 +157,21 @@ const PaidAccountActions = ({member, site, openUpdatePlan, onEditBilling}) => {
     };
 
     const BillingSection = ({defaultCardLast4, isComplimentary}) => {
+        const {action} = useContext(AppContext);
+        const label = action === 'editBilling:running' ? (
+            <LoaderIcon className='' />
+        ) : 'Update';
         if (isComplimentary) {
             return null;
         }
+
         return (
             <section>
                 <div className='gh-portal-list-detail'>
                     <h3>Billing Info</h3>
                     <CardLabel defaultCardLast4={defaultCardLast4} />
                 </div>
-                <button className='gh-portal-btn gh-portal-btn-list' onClick={e => onEditBilling(e)}>Update</button>
+                <button className='gh-portal-btn gh-portal-btn-list' onClick={e => onEditBilling(e)}>{label}</button>
             </section>
         );
     };