Skip to content

UX: keep events visible while loading; add subtle corner loader; add aria-busy on card#277

Open
IT-BAER wants to merge 1 commit intoalexpfau:mainfrom
IT-BAER:feat/silent-loading-indicator
Open

UX: keep events visible while loading; add subtle corner loader; add aria-busy on card#277
IT-BAER wants to merge 1 commit intoalexpfau:mainfrom
IT-BAER:feat/silent-loading-indicator

Conversation

@IT-BAER
Copy link

@IT-BAER IT-BAER commented Aug 24, 2025

Description

  • Replace full-card loading text state with a small non-blocking spinner in the card’s top-right corner.
  • Keep existing content visible while data refreshes to avoid flicker and layout shift.
  • Add aria-busy on ha-card and role=status on the indicator for better accessibility.
  • Preserve DOM structure for card-mod compatibility.

Changes highlight:

  • render.ts: add isLoading flag to renderMainCardStructure, render a .loading-indicator spinner, set aria-busy on ha-card.
  • Styles: add .loading-indicator/.spinner classes (small 14px spinner, pointer-events: none).

Related Issue

This PR fixes or closes issue: fixes #

Motivation and Context

Improves UX by avoiding replacing all events with loading text, reduces layout shifts, and provides accessible status feedback while loading.

How Has This Been Tested

  • Built local bundle and copied to Home Assistant www as a dashboard resource.
  • Used type: custom:calendar-card-pro-dev with refresh_interval: 1 to observe frequent refresh.
  • Verified:
    • Existing events remain visible during loads.
    • Small spinner appears in the top-right corner and does not block interactions.
    • aria-busy toggles correctly; indicator uses role=status and aria-live=polite.
    • Empty-state and normal-state behave consistently.
  • Environment: Home Assistant frontend in browser on Windows.

Types of changes

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • 🚀 New feature (non-breaking change which adds functionality)
  • 🌎 Translation (addition or update for a language)
  • ⚙️ Tech (code style improvement, performance improvement or dependencies update)
  • 📚 Documentation (fix or addition to documentation)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

Checklist

  • My code follows the code style of this project.
  • I have linted and formatted my code (npm run lint and npm run format)
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have tested the change in my local Home Assistant instance.
  • I have followed the translation guidelines if I'm adding or updating a translation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant