submit button spinners

src/app/settings/account.component.html

@@ -21,9 +21,9 @@
             </div>
         </div>
     </div>
-    <button type="submit" class="btn btn-primary" appBlurClick [disabled]="profileForm.loading">
-        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!profileForm.loading"></i>
-        {{'save' | i18n}}
+    <button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="profileForm.loading">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span>{{'save' | i18n}}</span>
     </button>
 </form>
 <div class="secondary-header">

src/app/vault/add-edit.component.html

@@ -348,11 +348,11 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'save' | i18n}}</span>
                 </button>
-                <button appBlurClick type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">
+                <button appBlurClick type="button" class="btn btn-outline-secondary" data-dismiss="modal">
                     {{'cancel' | i18n}}
                 </button>
                 <div class="ml-auto" *ngIf="cipher">

src/app/vault/attachments.component.html

@@ -39,9 +39,9 @@
                 <small class="form-text text-muted">{{'maxFileSize' | i18n}}</small>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">{{'close' | i18n}}</button>
             </div>

src/app/vault/bulk-delete.component.html

@@ -13,10 +13,9 @@
                 {{'deleteSelectedItemsDesc' | i18n: cipherIds.length}}
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-danger" title="{{'delete' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
-                    {{'delete' | i18n}}
+                <button appBlurClick type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'delete' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
             </div>

src/app/vault/bulk-move.component.html

@@ -19,9 +19,9 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
             </div>

src/app/vault/bulk-share.component.html

@@ -43,9 +43,9 @@
                 </table>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
             </div>

src/app/vault/folder-add-edit.component.html

@@ -12,9 +12,9 @@
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="folder.name">
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">

src/app/vault/share.component.html

@@ -43,9 +43,9 @@
                 </table>
             </div>
             <div class="modal-footer">
-                <button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
-                    <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
-                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
+                <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin"></i>
+                    <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
             </div>

src/scss/styles.scss

@@ -185,6 +185,31 @@ label:not(.form-check-label) {
     }
 }
 
+.btn-submit {
+    position: relative;
+
+    .fa-spinner {
+        position: absolute;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        bottom: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+
+    &:disabled {
+        .fa-spinner {
+            display: flex;
+        }
+
+        span {
+            visibility: hidden;
+        }
+    }
+}
+
 .table.table-list {
     tr:first-child {
         td {