diff --git a/ghost/admin/app/components/gh-role-selection.hbs b/ghost/admin/app/components/gh-role-selection.hbs
index f520c79999..a9fd5eff5e 100644
--- a/ghost/admin/app/components/gh-role-selection.hbs
+++ b/ghost/admin/app/components/gh-role-selection.hbs
@@ -1,6 +1,9 @@
 <div class="gh-roles-container" {{did-insert (perform this.fetchRolesTask)}}>
     {{#if this.fetchRolesTask.isRunning}}
-        <GhLoadingSpinner />
+        {{!-- width and height are needed to avoid layout shift after roles have loaded --}}
+        <div style="width: 486px; height: 268px">
+            <GhLoadingSpinner />
+        </div>
     {{else}}
     <div class="gh-radio {{if (eq @selected.name "Contributor") "active"}}" {{on "click" (fn this.setRole "Contributor")}} data-test-option="Contributor">
         <div class="gh-radio-button"></div>
diff --git a/ghost/admin/app/components/gh-role-selection.js b/ghost/admin/app/components/gh-role-selection.js
index 20157842b6..8722f858bf 100644
--- a/ghost/admin/app/components/gh-role-selection.js
+++ b/ghost/admin/app/components/gh-role-selection.js
@@ -28,7 +28,7 @@ export default class GhRoleSelectionComponent extends Component {
 
         this.roles = roles;
 
-        if (!this.args.role && defaultRole) {
+        if (!this.args.selected && defaultRole) {
             this.args.setRole(defaultRole);
         }
     }