Energy: Wait with subscribe for _config to be set (#11884)

src/mixins/subscribe-mixin.ts

@@ -13,6 +13,9 @@ export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
   class SubscribeClass extends superClass {
     @property({ attribute: false }) public hass?: HomeAssistant;
 
+    // we wait with subscribing till these properties are set on the host element
+    protected hassSubscribeRequiredHostProps?: string[];
+
     private __unsubs?: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>>;
 
     public connectedCallback() {
@@ -39,6 +42,16 @@ export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
       super.updated(changedProps);
       if (changedProps.has("hass")) {
         this.__checkSubscribed();
+        return;
+      }
+      if (!this.hassSubscribeRequiredHostProps) {
+        return;
+      }
+      for (const key of changedProps.keys()) {
+        if (this.hassSubscribeRequiredHostProps.includes(key as string)) {
+          this.__checkSubscribed();
+          return;
+        }
       }
     }
 
@@ -52,7 +65,10 @@ export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
       if (
         this.__unsubs !== undefined ||
         !(this as unknown as Element).isConnected ||
-        this.hass === undefined
+        this.hass === undefined ||
+        this.hassSubscribeRequiredHostProps?.some(
+          (prop) => this[prop] === undefined
+        )
       ) {
         return;
       }

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -32,6 +32,8 @@ class HuiEnergyCarbonGaugeCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public getCardSize(): number {
     return 4;
   }

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -49,6 +49,8 @@ export class HuiEnergyDevicesGraphCard
 
   @query("ha-chart-base") private _chart?: HaChartBase;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts

@@ -43,6 +43,8 @@ class HuiEnergyDistrubutionCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public setConfig(config: EnergyDistributionCardConfig): void {
     this._config = config;
   }

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -62,6 +62,8 @@ export class HuiEnergyGasGraphCard
 
   @state() private _unit?: string;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -35,6 +35,8 @@ class HuiEnergyGridGaugeCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass!, {

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -30,6 +30,8 @@ class HuiEnergySolarGaugeCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass!, {

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -61,6 +61,8 @@ export class HuiEnergySolarGraphCard
 
   @state() private _end = endOfToday();
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -45,6 +45,8 @@ export class HuiEnergySourcesTableCard
 
   @state() private _data?: EnergyData;
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -50,6 +50,8 @@ export class HuiEnergyUsageGraphCard
 
   @state() private _end = endOfToday();
 
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       getEnergyDataCollection(this.hass, {