feat(start-button): display loading state and let users cancel the update process

Author: IsAvaible

src/app/components/mod-panel/mod-panel.component.html

@@ -1,5 +1,5 @@
 <div class="flex w-full flex-col items-center px-10">
-  <app-start-button (notify)="startUpdateMods()" />
+  <app-start-button [loading]="this.loading" (notify)="startUpdateMods()" />
 
   <div class="mt-4 flex w-full flex-col">
     <div class="w-full">

src/app/components/mod-panel/mod-panel.component.ts

@@ -99,8 +99,8 @@ export class ModPanelComponent implements OnInit, OnDestroy {
   versionsSubscription!: Subscription;
   loaderSubscription!: Subscription;
   curseforgeSupscription!: Subscription;
-  private finishedSubscription!: Subscription;
-  private percentSubscription!: Subscription;
+  private finishedSubscription?: Subscription;
+  private percentSubscription?: Subscription;
 
   constructor() {}
 
@@ -195,6 +195,8 @@ export class ModPanelComponent implements OnInit, OnDestroy {
     this.versionsSubscription.unsubscribe();
     this.loaderSubscription.unsubscribe();
     this.curseforgeSupscription.unsubscribe();
+    this.finishedSubscription?.unsubscribe();
+    this.percentSubscription?.unsubscribe();
   }
 
   /**
@@ -984,16 +986,26 @@ export class ModPanelComponent implements OnInit, OnDestroy {
    * Orchestrates the entire update process, including file processing and dependency fetching.
    */
   async startUpdateMods() {
+    if (this.loading) {
+      this.finishedSubscription?.unsubscribe();
+      this.percentSubscription?.unsubscribe();
+      this.loading = false;
+      this.loadingPercent = 0;
+      return;
+    }
+
+    this.loading = true;
+    this.loadingPercent = 0;
+
     const [anyToProcess, initialFinished$, initialPercent$] =
       await this.updateMods();
     if (!anyToProcess) {
+      this.loading = false;
       return;
     }
 
-    this.loadingPercent = 0;
-    this.loading = true;
-    if (this.finishedSubscription) this.finishedSubscription.unsubscribe();
-    if (this.percentSubscription) this.percentSubscription.unsubscribe();
+    this.finishedSubscription?.unsubscribe();
+    this.percentSubscription?.unsubscribe();
 
     // assuming an average of 1-2 dependencies per mod batch
     const dependencyProcessingWeight = 1.5 / this.files.length;
@@ -1014,7 +1026,7 @@ export class ModPanelComponent implements OnInit, OnDestroy {
           const { progress$, finished$ } = this.processDependencies(mcVersion);
 
           // Switch from file progress to dependency progress
-          if (this.percentSubscription) this.percentSubscription.unsubscribe();
+          this.percentSubscription?.unsubscribe();
           this.percentSubscription = progress$.subscribe((depPercent) => {
             this.loadingPercent =
               fileProcessingWeight + depPercent * dependencyProcessingWeight;
@@ -1030,7 +1042,7 @@ export class ModPanelComponent implements OnInit, OnDestroy {
       )
       .subscribe(() => {
         this.loading = false;
-        if (this.percentSubscription) this.percentSubscription.unsubscribe();
+        this.percentSubscription?.unsubscribe();
       });
   }
 

src/app/components/start-button/start-button.component.html

@@ -1,21 +1,50 @@
 <button
   (click)="notify.emit()"
-  class="flex items-center gap-x-2 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-600 py-2 px-3 text-lg font-bold text-white hover:from-indigo-400 hover:to-purple-700"
+  [ngClass]="{
+    'cursor-wait bg-indigo-300': loading,
+    'bg-gradient-to-r from-indigo-400 to-purple-600 hover:from-indigo-400 hover:to-purple-700':
+      !loading
+  }"
+  class="flex items-center justify-center gap-x-2 rounded-lg py-2 px-3 text-lg font-bold text-white"
 >
-  Update
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
-    class="h-6 w-6"
-    aria-hidden="true"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
-    />
-  </svg>
+  @if (loading) {
+    <span>Loading</span>
+    <svg
+      class="h-5 w-5 animate-spin text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  } @else {
+    <span>Update</span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="h-6 w-6"
+      aria-hidden="true"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
+      />
+    </svg>
+  }
 </button>

src/app/components/start-button/start-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-start-button',
@@ -7,5 +7,6 @@ import { Component, EventEmitter, Output } from '@angular/core';
   standalone: false
 })
 export class StartButtonComponent {
+  @Input() loading: boolean = false;
   @Output() notify = new EventEmitter();
 }