diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
index 5687f2c54c..394e97bb8b 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
@@ -107,11 +107,14 @@
             {{#unless this.products}}
             <div class="gh-main-section-content bordered">
                 <div class="gh-cp-memberproduct-noproduct">
+                    {{#unless this.isCreatingComplimentary}}
                     <div class="mb2">This member doesn't have subscriptions.</div>
+                    {{/unless}}
+
                     {{#unless this.member.isNew}}
                         {{#if this.isAddComplimentaryAllowed}}
                             {{#if this.isCreatingComplimentary}}
-                                Loading...
+                                <GhLoadingSpinner />
                             {{else}}
                                 <button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action "addCompedSubscription"}}>
                                     <span>{{svg-jar "add"}} Add complimentary subscription</span>
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index a3610cb24a..cd8522a8fa 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1648,6 +1648,7 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-cp-memberproduct-noproduct {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1656,6 +1657,10 @@ p.gh-members-import-errordetail:first-of-type {
     padding: 48px 0;
 }
 
+.gh-cp-memberproduct-noproduct .gh-loading-content {
+    padding-bottom: unset;
+}
+
 .gh-btn-add-memberproduct[disabled],
 .gh-btn-add-memberproduct[disabled]:hover {
     background: var(--lightgrey-l1) !important;