Fix logbook username not appearing consistently (#6230)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/panels/logbook/ha-logbook.ts

@@ -9,7 +9,6 @@ import {
 } from "lit-element";
 import { scroll } from "lit-virtualizer";
 import { formatDate } from "../../common/datetime/format_date";
-import { fetchUsers } from "../../data/user";
 import { formatTimeWithSeconds } from "../../common/datetime/format_time";
 import { fireEvent } from "../../common/dom/fire_event";
 import { domainIcon } from "../../common/entity/domain_icon";
@@ -22,8 +21,7 @@ import { HomeAssistant } from "../../types";
 class HaLogbook extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property({ attribute: false })
-  private _userid_to_name = {};
+  @property() public userIdToName = {};
 
   @property() public entries: LogbookEntry[] = [];
 
@@ -62,20 +60,6 @@ class HaLogbook extends LitElement {
     `;
   }
 
-  private async _fetchUsers() {
-    const users = await fetchUsers(this.hass);
-    const userid_to_name = {};
-    users.forEach((user) => {
-      userid_to_name[user.id] = user.name;
-    });
-    this._userid_to_name = userid_to_name;
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this._fetchUsers();
-  }
-
   private _renderLogbookItem(
     item: LogbookEntry,
     index?: number
@@ -86,7 +70,7 @@ class HaLogbook extends LitElement {
     const previous = this.entries[index - 1];
     const state = item.entity_id ? this.hass.states[item.entity_id] : undefined;
     const item_username =
-      item.context_user_id && this._userid_to_name[item.context_user_id];
+      item.context_user_id && this.userIdToName[item.context_user_id];
     return html`
       <div>
         ${index === 0 ||

src/panels/logbook/ha-panel-logbook.ts

@@ -17,6 +17,7 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../types";
 import { haStyle } from "../../resources/styles";
+import { fetchUsers } from "../../data/user";
 import {
   clearLogbookCache,
   getLogbookData,
@@ -32,6 +33,9 @@ export class HaPanelLogbook extends LitElement {
 
   @property({ reflect: true, type: Boolean }) narrow!: boolean;
 
+  @property({ attribute: false })
+  private _userIdToName = {};
+
   @property() _startDate: Date;
 
   @property() _endDate: Date;
@@ -46,6 +50,8 @@ export class HaPanelLogbook extends LitElement {
 
   @property() private _ranges?: DateRangePickerRanges;
 
+  private _fetchUserDone?: Promise<unknown>;
+
   public constructor() {
     super();
 
@@ -112,6 +118,7 @@ export class HaPanelLogbook extends LitElement {
           : html`<ha-logbook
               .hass=${this.hass}
               .entries=${this._entries}
+              .userIdToName=${this._userIdToName}
             ></ha-logbook>`}
       </app-header-layout>
     `;
@@ -121,6 +128,8 @@ export class HaPanelLogbook extends LitElement {
     super.firstUpdated(changedProps);
     this.hass.loadBackendTranslation("title");
 
+    this._fetchUserDone = this._fetchUsers();
+
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     const todayEnd = new Date(today);
@@ -184,6 +193,15 @@ export class HaPanelLogbook extends LitElement {
     }
   }
 
+  private async _fetchUsers() {
+    const users = await fetchUsers(this.hass);
+    const userid_to_name = {};
+    users.forEach((user) => {
+      userid_to_name[user.id] = user.name;
+    });
+    this._userIdToName = userid_to_name;
+  }
+
   private _dateRangeChanged(ev) {
     this._startDate = ev.detail.startDate;
     const endDate = ev.detail.endDate;
@@ -209,12 +227,18 @@ export class HaPanelLogbook extends LitElement {
 
   private async _getData() {
     this._isLoading = true;
-    this._entries = await getLogbookData(
-      this.hass,
-      this._startDate.toISOString(),
-      this._endDate.toISOString(),
-      this._entityId
-    );
+    const [entries] = await Promise.all([
+      getLogbookData(
+        this.hass,
+        this._startDate.toISOString(),
+        this._endDate.toISOString(),
+        this._entityId
+      ),
+      this._fetchUserDone,
+    ]);
+    // Fixed in TS 3.9 but upgrade out of scope for this PR.
+    // @ts-ignore
+    this._entries = entries;
     this._isLoading = false;
   }