Issue #3318726 by earthday47, chrisfromredfin, rkoller, tim.plunkett, dww,...

Issue #3318726 by earthday47, chrisfromredfin, rkoller, tim.plunkett, dww, fjgarlin: Reposition the card centric spinner for the Svelte UI for install controllers

css/pb.css

@@ -298,7 +298,10 @@
 .pb-actions {
   margin-inline-start: auto;
 }
-
+.pb-actions .loading__ajax-progress {
+  display: inline-block;
+  line-height: 0.75;
+}
 .pb-actions__icon {
   color: #228572;
 }
@@ -386,6 +389,9 @@
 .pb-project {
   padding: 1em;
 }
+.pb-project .ajax-progress__throbber {
+  display: inline-block;
+}
 .pb-project--grid {
   display: flex;
   flex-flow: column nowrap;

sveltejs/src/Loading.svelte

 <script>
   // eslint-disable-next-line import/prefer-default-export
   export let positionAbsolute = false;
+  export let inline = false;
 </script>
 
 <div
-  class="loading__ajax-progress ajax-progress--fullscreen"
+  class="loading__ajax-progress"
   class:absolute={positionAbsolute}
+  class:ajax-progress--fullscreen={!inline}
 >
-  <div class="ajax-progress__throbber ajax-progress__throbber--fullscreen">
+  <div
+    class="ajax-progress__throbber"
+    class:ajax-progress__throbber--fullscreen={!inline}
+  >
     &nbsp;
   </div>
 </div>

sveltejs/src/Project/ActionButton.svelte

@@ -188,8 +188,8 @@
     <span>
       {#if ALLOW_UI_INSTALL}
         {#if loading}
+          <Loading positionAbsolute={true} inline={true} />
           <LoadingEllipsis />
-          <Loading positionAbsolute={true} />
         {:else}
           <AddInstallButton
             {project}
@@ -213,8 +213,8 @@
     <span>
       {#if !PM_VALIDATION_ERROR && ALLOW_UI_INSTALL}
         {#if loading}
+          <Loading positionAbsolute={true} inline={true} />
           <span class="pb-ellipsis">{loadingPhase}</span>
-          <Loading positionAbsolute={true} />
         {:else}
           <AddInstallButton
             {project}