Skip to content

HIGH: Add HTMX Loading States and Visual Feedback Across All Modes #7

Description

@nathanbangwa243

Issue

HTMX swaps lack visual feedback during requests. No loading indicator, spinner, or animation cues users that an action is processing.

Current State

  • Bingo board squares toggle colors but with no loading state
  • Card Deck draw requests have no visual indication of processing
  • Scavenger Hunt marks update without confirmation feedback
  • No toast notifications for achievements

Impact

  • Users uncertain if interaction registered
  • Perceived latency feels worse than actual latency
  • No celebration/confirmation on win state (scavenger hunt)
  • Poor feedback loop for accessibility

Recommended Implementation

  • Add HTMX hx-indicator spinners during requests
  • Implement micro-animations for state transitions (scale, fade, progress)
  • Add toast notification on Bingo victory
  • Provide visual confirmation on Card Deck draw (brief glow/highlight)
  • Disable buttons during processing to prevent double-clicks

Files to Update

  • app/templates/base.html (add spinner template, toast container)
  • app/static/css/app.css (loading animation keyframes)
  • app/templates/components/game_screen.html (add indicator to toggle buttons)
  • app/templates/components/scavenger_list.html (add indicator to mark buttons)
  • app/templates/components/card_deck.html (add indicator to draw button)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions