mirror of
https://github.com/tiennm99/coolify.git
synced 2026-04-17 19:21:36 +00:00
Improve logging view performance to prevent browser freezing
- Use CSS content-visibility: auto for lazy rendering of off-screen log lines - Replace setInterval auto-scroll with requestAnimationFrame for smoother scrolling - Cache HTML entity decoding to avoid repeated DOMParser calls (up to 5000 entries) - Cache match count calculations to prevent repeated DOM queries - Debounce search input (300ms) in deployment logs view - Debounce Livewire render updates (100ms) to batch rapid changes - Add log-line utility class with content-visibility optimization - Add log-highlight utility class for search result highlighting These changes address browser freezing when viewing deployment logs with 3500+ lines (GitHub issue #7668). The content-visibility CSS property lets the browser skip rendering of off-screen content, significantly reducing initial render time and memory usage. Fixes #7668
This commit is contained in:
@@ -292,3 +292,14 @@
|
||||
@utility xterm {
|
||||
@apply p-2;
|
||||
}
|
||||
|
||||
/* Log line optimization - uses content-visibility for lazy rendering of off-screen log lines */
|
||||
@utility log-line {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 1.5em;
|
||||
}
|
||||
|
||||
/* Search highlight styling for logs */
|
||||
@utility log-highlight {
|
||||
@apply bg-warning/40 dark:bg-warning/30 rounded-sm px-0.5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user