From 2cbf2cc4ec57eefd35b3f2be966af8645159fa1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Tue, 17 Jan 2023 13:27:02 -0500
Subject: [PATCH] perf: cut back on socket emits

perf: dont call emit if meta info is not visible
---
 public/src/client/topic/glance.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/public/src/client/topic/glance.js b/public/src/client/topic/glance.js
index ba73be3644..c700f2d022 100644
--- a/public/src/client/topic/glance.js
+++ b/public/src/client/topic/glance.js
@@ -57,11 +57,11 @@ function enableHandle() {
 	updateTrackPosition();
 	window.addEventListener('resize', updateTrackPosition);
 
-	onPage('action:navigator.update', ({ newIndex }) => {
+	onPage('action:navigator.update', utils.debounce(({ newIndex }) => {
 		if (!active) {
 			repositionHandle(newIndex);
 		}
-	});
+	}, 150));
 
 	onPage('action:navigator.scrolled', ({ newIndex }) => {
 		if (!active) {
@@ -104,6 +104,10 @@ function getIndexFromTrack() {
 	return index;
 }
 
+// https://stackoverflow.com/a/21696585/583363
+const isHidden = el => el.offsetParent === null;
+
+
 async function updateUnreadIndicator(index) {
 	if (ajaxify.data.postcount <= ajaxify.data.bookmarkThreshold) {
 		return;
@@ -111,6 +115,11 @@ async function updateUnreadIndicator(index) {
 
 	index = Math.max(index, ajaxify.data.bookmark);
 	const unreadEl = document.querySelector('[component="topic/navigator"] .unread');
+	const meta = unreadEl.querySelector('.meta');
+	if (isHidden(meta)) {
+		return;
+	}
+
 	const percentage = 1 - (index / ajaxify.data.postcount);
 	unreadEl.style.height = `${trackHeight * percentage}px`;
 
@@ -135,8 +144,13 @@ function repositionHandle(index) {
 
 async function updateHandleText(index) {
 	const { tid } = ajaxify.data;
-	const indexEl = handleEl.querySelector('.meta .index');
-	const timestampEl = handleEl.querySelector('.meta .timestamp');
+	const meta = handleEl.querySelector('.meta');
+	if (isHidden(meta)) {
+		return;
+	}
+
+	const indexEl = meta.querySelector('.index');
+	const timestampEl = meta.querySelector('.timestamp');
 
 	const text = await translate(`[[topic:navigator.index, ${index}, ${ajaxify.data.postcount}]]`);
 	indexEl.innerText = text;