kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

lazyloading and less comment preloading

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-17 11:46:21 +02:00
parent a7b8f8f8e5
commit 55a9548f95
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/s/js/sidebar-activity.js
View File

@@ -390,7 +390,7 @@
let mediaHtml = ''; let mediaHtml = '';
let thumbUrl = `/t/${c.item_id}.webp`; let thumbUrl = `/t/${c.item_id}.webp`;
if (window.applyThumbCacheBust) thumbUrl = window.applyThumbCacheBust(thumbUrl); if (window.applyThumbCacheBust) thumbUrl = window.applyThumbCacheBust(thumbUrl);
mediaHtml = `<img src="${thumbUrl}" style="width: 32px; height: 32px; object-fit: cover; border-radius: 2px;" onerror="this.style.display='none'" />`; mediaHtml = `<img src="${thumbUrl}" style="width: 32px; height: 32px; object-fit: cover; border-radius: 2px;" loading="lazy" onerror="this.style.display='none'" />`;
itemPreview = ` itemPreview = `
<div class="item-preview"> <div class="item-preview">
@@ -525,7 +525,8 @@
return true; return true;
}; };
const SIDEBAR_PAGE_LIMIT = 5; const SIDEBAR_PAGE_LIMIT = 50;
const SIDEBAR_INITIAL_LIMIT = 15;
const loadActivity = async (silent = false) => { const loadActivity = async (silent = false) => {
const container = document.getElementById('sidebar-activity-container'); const container = document.getElementById('sidebar-activity-container');
@@ -545,7 +546,7 @@
hasMore = true; hasMore = true;
try { try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : ''; const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const res = await fetch(`/activity?json=true&page=1&mode=${mode}`, { const res = await fetch(`/activity?json=true&page=1&limit=${SIDEBAR_INITIAL_LIMIT}&mode=${mode}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' } headers: { 'X-Requested-With': 'XMLHttpRequest' }
}); });
const data = await res.json(); const data = await res.json();
@@ -555,7 +556,7 @@
...c, ...c,
body: c.content || c.body body: c.content || c.body
})); }));
hasMore = data.hasMore === true; hasMore = data.hasMore === true || data.comments.length === SIDEBAR_INITIAL_LIMIT;
renderFromCache(); renderFromCache();
// Also check after a delay to account for image/emoji loading shifts // Also check after a delay to account for image/emoji loading shifts
setTimeout(checkOverflow, 500); setTimeout(checkOverflow, 500);
@@ -580,7 +581,9 @@
if (!container || loading || loadingMore || !hasMore) return; if (!container || loading || loadingMore || !hasMore) return;
loadingMore = true; loadingMore = true;
const nextPage = currentPage + 1; // Use the current cache length as the exact offset so there's never a gap,
// regardless of the initial fetch limit.
const nextOffset = window._sidebarActivityCache.length;
// Show a subtle loading row at the bottom // Show a subtle loading row at the bottom
const sentinel = document.createElement('div'); const sentinel = document.createElement('div');
@@ -591,7 +594,7 @@
try { try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : ''; const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const res = await fetch(`/activity?json=true&page=${nextPage}&mode=${mode}`, { const res = await fetch(`/activity?json=true&offset=${nextOffset}&limit=${SIDEBAR_PAGE_LIMIT}&mode=${mode}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' } headers: { 'X-Requested-With': 'XMLHttpRequest' }
}); });
const data = await res.json(); const data = await res.json();
@@ -601,7 +604,7 @@
if (s) s.remove(); if (s) s.remove();
if (data.success && data.comments && data.comments.length > 0) { if (data.success && data.comments && data.comments.length > 0) {
currentPage = nextPage; currentPage++;
hasMore = data.hasMore === true; hasMore = data.hasMore === true;
// Append only comments not already in the cache // Append only comments not already in the cache

7
src/inc/routes/comments.mjs
View File

@@ -783,8 +783,11 @@ export default (router, tpl) => {
router.get(/\/activity\/?/, async (req, res) => { router.get(/\/activity\/?/, async (req, res) => {
try { try {
const page = +(req.url.qs?.page || 1); const page = +(req.url.qs?.page || 1);
const limit = 50; const limit = Math.min(+(req.url.qs?.limit || 50), 50);
const offset = (page - 1) * limit; // Support explicit offset (used by sidebar infinite-scroll after a non-standard initial limit)
const offset = req.url.qs?.offset !== undefined
? Math.max(0, +(req.url.qs.offset))
: (page - 1) * limit;
/* <mode-override> */ /* <mode-override> */
// prioritize query mode (from AJAX) over session default // prioritize query mode (from AJAX) over session default