feat: add button spinner to register button (#76)

danieljancar · Aug 15, 2024 · 3f52851 · 3f52851
1 parent aec417f
commit 3f52851
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/apps/frontend/src/app/features/register/register.component.html b/apps/frontend/src/app/features/register/register.component.html
@@ -1,6 +1,4 @@
-@if (isLoading) {
-<app-loading aria-live="polite" aria-label="Loading..."></app-loading>
-} @else { @if (hasError) {
+@if (hasError) {
 <app-error
   [title]="'Error occurred'"
   [message]="this.errorMessage"
@@ -135,7 +133,9 @@ <h1 class="font-bold">Your public and secret keys</h1>
             'bg-indigo-600 hover:bg-indigo-700': publicKey && secretKey
           }"
         >
-          Register
+          @if (isLoading){
+          <app-button-spinner />
+          }@else{ Register }
         </button>
       </div>
     </form>
@@ -159,4 +159,4 @@ <h1 class="font-bold">Your public and secret keys</h1>
     </p>
   </div>
 </div>
-} }
+}
diff --git a/apps/frontend/src/app/features/register/register.component.ts b/apps/frontend/src/app/features/register/register.component.ts
@@ -12,6 +12,7 @@ import { Router, RouterLink } from '@angular/router'
 import { ErrorComponent } from '../../shared/feedback/error/error.component'
 import { LoadingComponent } from '../../shared/feedback/loading/loading.component'
 import { SuccessComponent } from '../../shared/feedback/success/success.component'
+import { ButtonSpinnerComponent } from '../../shared/feedback/button-spinner/button-spinner.component'
 
 @Component({
   selector: 'app-register',
@@ -25,6 +26,7 @@ import { SuccessComponent } from '../../shared/feedback/success/success.componen
     SuccessComponent,
     NgOptimizedImage,
     RouterLink,
+    ButtonSpinnerComponent,
   ],
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.css'],

diff --git a/apps/frontend/src/app/shared/feedback/button-spinner/button-spinner.component.html b/apps/frontend/src/app/shared/feedback/button-spinner/button-spinner.component.html
@@ -1,5 +1,5 @@
 <svg
-  class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+  class="animate-spin h-5 w-5 text-white"
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
   viewBox="0 0 24 24"