paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 23:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

condense: Avoid layout thrashing.

Browse Source 
More information on layout thrashing
[here](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/#avoid-layout-thrashing).
This commit is contained in:
evykassirer
2023-05-30 15:30:46 -07:00
committed by Tim Abbott
parent 8d0fa236c8
commit 43b18eabf1
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/condense.js
View File

@@ -196,6 +196,7 @@ export function show_message_condenser($row) {
export function condense_and_collapse(elems) { export function condense_and_collapse(elems) {
const height_cutoff = message_viewport.height() * 0.65; const height_cutoff = message_viewport.height() * 0.65;
const rows_to_resize = [];
for (const elem of elems) { for (const elem of elems) {
const $content = $(elem).find(".message_content"); const $content = $(elem).find(".message_content");
@@ -218,6 +219,20 @@ export function condense_and_collapse(elems) {
} }
const message_height = get_message_height(elem, message.id); const message_height = get_message_height(elem, message.id);
rows_to_resize.push({
elem,
$content,
message,
message_height,
});
}
// Note that we resize all the rows *after* we calculate if we should
// resize them or not. This allows us to do all measurements before
// changing the layout of the page, which is more performanant.
// More information here: https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/#avoid-layout-thrashing
for (const {elem, $content, message, message_height} of rows_to_resize) {
const long_message = message_height > height_cutoff; const long_message = message_height > height_cutoff;
if (long_message) { if (long_message) {
// All long messages are flagged as such. // All long messages are flagged as such.