From 50716e7ac7b0b5aff01ecfd504b5c5e510c416a9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 17 Jul 2026 08:01:09 +0000
Subject: [PATCH] Add loading spinners to async buttons in Home view

Replaces text-based loading states with the unified Spinner component for better feedback. Applies to "Add Deck" buttons, the "Run Simulations" button, the deck delete button, and the initial deck loading state.
---
 frontend/src/pages/Home.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index e24fa9c0..56b22e23 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { getApiBase, fetchWithAuth } from '../api';
 import { getRuntimeConfig } from '../config';
 import { useAuth } from '../contexts/AuthContext';
+import { Spinner } from '../components/Spinner';
 import { ColorIdentity } from '../components/ColorIdentity';
 import { SliderWithInput } from '../components/SliderWithInput';
 import { LoginButton } from '../components/LoginButton';
@@ -399,13 +400,13 @@ function SimulationForm() {
             type="button"
             onClick={handleSaveDeck}
             disabled={isSaving || !deckUrl.trim()}
-            className={`px-4 py-2 rounded-md ${
+            className={`px-4 py-2 rounded-md flex items-center justify-center ${
               isSaving || !deckUrl.trim()
                 ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
                 : 'bg-green-600 text-white hover:bg-green-700'
             }`}
           >
-            {isSaving ? 'Adding...' : 'Add Deck'}
+            {isSaving ? <><Spinner className="mr-2" /> Adding...</> : 'Add Deck'}
           </button>
         </div>
 
@@ -448,13 +449,13 @@ function SimulationForm() {
               type="button"
               onClick={handleSaveDeck}
               disabled={isSaving || !deckText.trim()}
-              className={`mt-3 w-full py-2 rounded-md font-medium ${
+              className={`mt-3 w-full py-2 rounded-md font-medium flex items-center justify-center ${
                 isSaving || !deckText.trim()
                   ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
                   : 'bg-green-600 text-white hover:bg-green-700'
               }`}
             >
-              {isSaving ? 'Adding...' : 'Add Deck'}
+              {isSaving ? <><Spinner className="mr-2" /> Adding...</> : 'Add Deck'}
             </button>
           </>
         )}
@@ -512,7 +513,7 @@ function SimulationForm() {
           <div className="max-h-80 overflow-y-auto bg-gray-700 rounded-md p-3">
             {decksLoading && (
               <div className="flex items-center justify-center py-8">
-                <div className="animate-spin h-6 w-6 border-2 border-purple-500 border-t-transparent rounded-full mr-3" />
+                <Spinner className="text-purple-500 mr-3" size="md" />
                 <span className="text-sm text-gray-400">Loading decks...</span>
               </div>
             )}
@@ -588,13 +589,13 @@ function SimulationForm() {
                             onClick={() => handleDeleteDeck(deck)}
                             disabled={isDeleting === deck.id}
                             aria-label={`Delete deck ${deck.name}`}
-                            className={`px-2 py-0.5 rounded text-xs ${
+                            className={`px-2 py-0.5 rounded text-xs flex items-center justify-center ${
                               isDeleting === deck.id
                                 ? 'bg-gray-500 text-gray-300 cursor-not-allowed'
                                 : 'bg-red-600/50 text-red-200 hover:bg-red-600'
                             }`}
                           >
-                            {isDeleting === deck.id ? '...' : 'X'}
+                            {isDeleting === deck.id ? <Spinner size="sm" /> : 'X'}
                           </button>
                         )}
                       </div>
@@ -693,13 +694,13 @@ function SimulationForm() {
         <button
           type="submit"
           disabled={isSubmitting || selectedDeckIds.length !== 4}
-          className={`w-full py-3 rounded-md font-semibold ${
+          className={`w-full py-3 rounded-md font-semibold flex items-center justify-center ${
             isSubmitting || selectedDeckIds.length !== 4
               ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
               : 'bg-blue-600 text-white hover:bg-blue-700'
           }`}
         >
-          {isSubmitting ? 'Submitting...' : 'Run Simulations'}
+          {isSubmitting ? <><Spinner className="mr-2" /> Submitting...</> : 'Run Simulations'}
         </button>
       </form>
     </div>