Skip to content

🎨 Palette: [UX improvement] Add loading spinners to async buttons #490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
google-labs-jules wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Add loading spinners to async buttons #490

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions frontend/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>
</>
)}
Expand Down Expand Up @@ -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>
)}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading