From 2bc026677583fd2d78a2b74cde965dc0b7fb7c7a Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 3 Jan 2026 00:18:07 +0200
Subject: [PATCH] feat: add loading state to download button and enhance UI
 with spinner

---
 src/locales/en/translation.json                   |  1 +
 .../modals/download-settings-modal.scss           | 13 +++++++++++++
 .../modals/download-settings-modal.tsx            | 15 ++++++++++++---
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 07029def..c71eab4e 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -175,6 +175,7 @@
     "repacks_modal_description": "Choose the repack you want to download",
     "select_folder_hint": "To change the default folder, go to the <0>Settings</0>",
     "download_now": "Download now",
+    "loading": "Loading...",
     "no_shop_details": "Could not retrieve shop details.",
     "download_options": "Download options",
     "download_path": "Download path",
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index b2885cb3..4c33ebb4 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -93,4 +93,17 @@
   &__change-path-button {
     align-self: flex-end;
   }
+
+  &__loading-spinner {
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
index f488d23a..71558e6d 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -7,7 +7,7 @@ import {
   Modal,
   TextField,
 } from "@renderer/components";
-import { DownloadIcon } from "@primer/octicons-react";
+import { DownloadIcon, SyncIcon } from "@primer/octicons-react";
 import {
   Downloader,
   formatBytes,
@@ -323,8 +323,17 @@ export function DownloadSettingsModal({
             !hasWritePermission
           }
         >
-          <DownloadIcon />
-          {t("download_now")}
+          {downloadStarting ? (
+            <>
+              <SyncIcon className="download-settings-modal__loading-spinner" />
+              {t("loading")}
+            </>
+          ) : (
+            <>
+              <DownloadIcon />
+              {t("download_now")}
+            </>
+          )}
         </Button>
       </div>
     </Modal>