Refactored button icon

app/components/button.js

@@ -14,8 +14,8 @@ export const sizes = {
 
 export const iconSizes = {
   sm: 18,
-  md: 22,
-  lg: 24,
+  md: 20,
+  lg: 22,
 };
 
 export const styles = {
@@ -37,10 +37,12 @@ export default class ButtonComponent extends Component {
       ...attributes
       {{on 'click' this.handleClick}}
     >
-      {{#if this.isPending}}
-        <Loading @spin={{true}} @size={{get iconSizes this.size}} />
-      {{else if @icon}}
-        <@icon @size={{get iconSizes this.size}} />
+      {{#if this.icon}}
+        <this.icon
+          @spin={{this.isPending}}
+          @size={{get iconSizes this.size}}
+          class="mr-1"
+        />
       {{/if}}
 
       {{#if (has-block)}}
@@ -53,6 +55,10 @@ export default class ButtonComponent extends Component {
 
   @tracked _state = 'default';
 
+  get icon() {
+    return this.isPending ? Loading : this.args?.icon;
+  }
+
   get style() {
     return this.args.style ?? 'default';
   }
@@ -84,6 +90,7 @@ export default class ButtonComponent extends Component {
   get state() {
     return this.args.state ?? this._state;
   }
+
   set state(state) {
     this._state = state;
   }

app/controllers/admin/indexes/item/edit.js

@@ -1,11 +1,14 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 export default class AdminIndexesItemEditController extends Controller {
   @service router;
   @service toasts;
 
+  @tracked isSaving;
+
   @action
   async save(event) {
     event.preventDefault();
@@ -13,8 +16,12 @@ export default class AdminIndexesItemEditController extends Controller {
     const formData = new FormData(event.currentTarget);
     const data = Object.fromEntries(formData.entries());
 
+    this.isSaving = true;
+
     const task = await this.model.save(data);
 
+    this.isSaving = false;
+
     this.toasts.taskToast(task);
   }
 

app/templates/admin/indexes/item/edit.hbs

@@ -14,6 +14,8 @@
     @required={{true}}
   />
 
-  <Button type='submit' @text='Save' @style='primary' />
-  <Button @text='Cancel' @onClick={{this.cancel}} />
+  <div class='flex items-center'>
+    <Button type='submit' @text='Save' @style='primary' @state={{if this.isSaving 'pending'}} />
+    <Button @text='Cancel' @onClick={{this.cancel}} class="ml-2"/>
+  </div>
 </form>