Skip to content

Commit

Permalink
force re-render after 1 second when card is in loading state
Browse files Browse the repository at this point in the history
  • Loading branch information
catdad committed Apr 9, 2024
1 parent d3ae30f commit 9d4819b
Showing 1 changed file with 14 additions and 1 deletion.
15 changes: 14 additions & 1 deletion src/combined-card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@ import { state, customElement } from "lit/decorators.js";
import { HomeAssistant, LovelaceCardConfig, LovelaceCard } from 'custom-card-helpers';
import { NAME, EDITOR_NAME, HELPERS, LOG, loadStackEditor } from './utils';

const getRandomId = (): string => Math.random().toString(36).slice(2);

@customElement(NAME)
class CombinedCard extends LitElement implements LovelaceCard {
@state() private _config?: LovelaceCardConfig;
@state() private _helpers?;
@state() private _forceRender: string = getRandomId();

private _card?: LovelaceCard;
private _hass?: HomeAssistant;
private _editMode: boolean = false;
private _timer?: number;

set hass(hass: HomeAssistant) {
this._hass = hass;
Expand Down Expand Up @@ -83,8 +87,17 @@ class CombinedCard extends LitElement implements LovelaceCard {
}

protected render() {
const that = this;

clearTimeout(this._timer);

if (!(this._config && this._helpers)) {
LOG(`Rendering card: { config: ${!!this._config}, helpers: ${HELPERS.loaded} }`);

this._timer = setTimeout(() => {
that._forceRender = getRandomId();
}, 1000);

return this._loading();
}

Expand All @@ -98,7 +111,7 @@ class CombinedCard extends LitElement implements LovelaceCard {

return html`
<ha-card>
<div style="${styles.join(';')}">${element}</div>
<div render-id="${this._forceRender}" style="${styles.join(';')}">${element}</div>
</ha-card>
`;
}
Expand Down

0 comments on commit 9d4819b

Please sign in to comment.