feat: add loading state to download button and enhance UI with spinner

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",

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);
+  }
 }

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 />
+          {downloadStarting ? (
-          {t("download_now")}
+            <>
+              <SyncIcon className="download-settings-modal__loading-spinner" />
+              {t("loading")}
+            </>
+          ) : (
+            <>
+              <DownloadIcon />
+              {t("download_now")}
+            </>
+          )}
         </Button>
       </div>
     </Modal>