Skip to content

Show a stable loading state before the first render - #639

Open
rosenrot00 wants to merge 3 commits into
dbuezas:masterfrom
rosenrot00:show-loading-state
Open

Show a stable loading state before the first render#639
rosenrot00 wants to merge 3 commits into
dbuezas:masterfrom
rosenrot00:show-loading-state

Conversation

@rosenrot00

@rosenrot00 rosenrot00 commented Jul 30, 2026

Copy link
Copy Markdown
  • reserve the card's plot height while its initial data is loading
  • use the configured layout.height, falling back to the existing 285 px default
  • show the Home Assistant card background with a subtle scan-line indicator until the first Plotly render finishes
  • expose the loading state through aria-busy and respect prefers-reduced-motion
  • remove the indicator in a finally block so rendering errors do not leave the card looking permanently busy

The plot container has no height before the first Plotly.react() call and is hidden during that time. Cards can therefore appear missing and then cause a visible layout shift when history or statistics data arrives.

This adds a CSS-only loading state. It does not trigger another Plotly render or any additional Home Assistant data request.

@rosenrot00
rosenrot00 marked this pull request as ready for review August 29, 2026 16:44
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