Dont virtualize logbook in more info (#6907)

src/dialogs/more-info/ha-more-info-history.ts

@@ -8,7 +8,6 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import "../../components/ha-circular-progress";
 import "../../components/state-history-charts";
@@ -16,7 +15,7 @@ import { getRecentWithCache } from "../../data/cached-history";
 import { HistoryResult } from "../../data/history";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import "../../panels/logbook/ha-logbook";
-import { haStyle } from "../../resources/styles";
+import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
 @customElement("ha-more-info-history")
@@ -59,12 +58,10 @@ export class MoreInfoHistory extends LitElement {
         : this._entries.length
         ? html`
             <ha-logbook
+              class="ha-scrollbar"
               narrow
               no-icon
               no-name
-              style=${styleMap({
-                height: `${(this._entries.length + 1) * 56}px`,
-              })}
               .hass=${this.hass}
               .entries=${this._entries}
               .userIdToName=${this._persons}
@@ -140,6 +137,7 @@ export class MoreInfoHistory extends LitElement {
   static get styles() {
     return [
       haStyle,
+      haStyleScrollbar,
       css`
         state-history-charts {
           display: block;
@@ -151,8 +149,8 @@ export class MoreInfoHistory extends LitElement {
         }
         ha-logbook {
           max-height: 360px;
+          overflow: auto;
         }
-
         ha-circular-progress {
           display: flex;
           justify-content: center;

src/panels/logbook/ha-logbook.ts

@@ -21,7 +21,6 @@ import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon";
 import { LogbookEntry } from "../../data/logbook";
-import { haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
 @customElement("ha-logbook")
@@ -38,6 +37,9 @@ class HaLogbook extends LitElement {
   @property({ attribute: "rtl", type: Boolean })
   private _rtl = false;
 
+  @property({ type: Boolean, attribute: "virtualize", reflect: true })
+  public virtualize = false;
+
   @property({ type: Boolean, attribute: "no-icon" })
   public noIcon = false;
 
@@ -74,7 +76,7 @@ class HaLogbook extends LitElement {
 
     return html`
       <div
-        class="container ha-scrollbar ${classMap({
+        class="container ${classMap({
           narrow: this.narrow,
           rtl: this._rtl,
           "no-name": this.noName,
@@ -82,11 +84,15 @@ class HaLogbook extends LitElement {
         })}"
         @scroll=${this._saveScrollPos}
       >
-        ${scroll({
+        ${this.virtualize
+          ? scroll({
               items: this.entries,
               renderItem: (item: LogbookEntry, index?: number) =>
                 this._renderLogbookItem(item, index),
-        })}
+            })
+          : this.entries.map((item, index) =>
+              this._renderLogbookItem(item, index)
+            )}
       </div>
     `;
   }
@@ -185,10 +191,8 @@ class HaLogbook extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResult {
-    return [
+    return css`
-      haStyleScrollbar,
-      css`
       :host {
         display: block;
         height: 100%;
@@ -283,8 +287,7 @@ class HaLogbook extends LitElement {
       .narrow .icon-message ha-icon {
         margin-left: 0;
       }
-      `,
+    `;
-    ];
   }
 }
 

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

@@ -1,33 +1,33 @@
+import { mdiRefresh } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
-import { computeRTL } from "../../common/util/compute_rtl";
-import "../../components/entity/ha-entity-picker";
-import "../../components/ha-menu-button";
-import "../../layouts/ha-app-layout";
-import "./ha-logbook";
 import {
-  LitElement,
+  css,
-  property,
-  internalProperty,
   customElement,
   html,
-  css,
+  internalProperty,
+  LitElement,
+  property,
   PropertyValues,
 } from "lit-element";
-import { HomeAssistant } from "../../types";
+import { computeRTL } from "../../common/util/compute_rtl";
-import { haStyle } from "../../resources/styles";
+import "../../components/entity/ha-entity-picker";
-import { fetchUsers } from "../../data/user";
+import "../../components/ha-circular-progress";
-import { fetchPersons } from "../../data/person";
+import "../../components/ha-date-range-picker";
+import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
+import "../../components/ha-icon-button";
+import "../../components/ha-menu-button";
 import {
   clearLogbookCache,
   getLogbookData,
   LogbookEntry,
 } from "../../data/logbook";
-import { mdiRefresh } from "@mdi/js";
+import { fetchPersons } from "../../data/person";
-import "../../components/ha-date-range-picker";
+import { fetchUsers } from "../../data/user";
-import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
+import "../../layouts/ha-app-layout";
+import { haStyle } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import "./ha-logbook";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -125,6 +125,7 @@ export class HaPanelLogbook extends LitElement {
               .hass=${this.hass}
               .entries=${this._entries}
               .userIdToName=${this._userIdToName}
+              virtualize
             ></ha-logbook>`}
       </ha-app-layout>
     `;