Frontend perf: pdf.js smart preload, admin poll cleanup, list render hoisting
Three targeted frontend fixes: 1. pdf.js smart preload (thumbnail.js, resourceIcon.js). The first PDF thumbnail of a session stalled 1-2s on the lazy import of the ~1.3 MB pdf.js stack. buildResourceIcon() now fires thumbnail.preloadPdf() the moment a PDF row enters the DOM, warming both the module (~300 KB, via the now promise-memoized getPdfjsLib, shared with real users) and the worker script (~1 MB, via a cache-priming fetch — pdf.js only requests it on first getDocument). Only folders that actually contain PDFs pay the download; idempotent after first call, resets on failure so transient offline retries. 2. Admin migration poll cleanup (admin.js). The 2s setInterval kept hitting the API and updating hidden DOM after leaving the Storage tab, and polled a failing endpoint forever after session expiry (!resp.ok returned without clearing). New stopMigrationPolling() helper, invoked on tab switch away from Storage, on non-running status, and on failed polls; tab re-entry re-arms via loadStorage(). 3. resourceList.js render hoisting. Per-row i18n.t() type-cell lookups and the fully item-invariant _renderCustomActions() HTML were recomputed for every row; they now resolve once per batch via _buildItemLabels() (per-category labels memoized, rebuilt each batch so locale switches keep working). _findLaneByKey() swaps the container-wide attribute querySelector for an O(1) _lanes Map kept in sync at the only lane create/wipe sites. https://claude.ai/code/session_0193Hff42gaA962wThxMGSd1
This commit is contained in:
@@ -2,29 +2,47 @@ import { getCsrfHeaders } from '../core/csrf.js';
|
||||
|
||||
/** @import {FileItem} from '../core/types.js' */
|
||||
|
||||
// IMPORTANT: absolute paths so the dynamic import resolves correctly both in
|
||||
// dev mode (native ESM, module at /js/features/thumbnail.js) and in release
|
||||
// mode (IIFE bundle at /js/app.{hash}.js — relative '../vendors/…' would
|
||||
// incorrectly resolve to /vendors/… instead of /js/vendors/…).
|
||||
const PDFJS_LIB_URL = '/js/vendors/pdf.min.mjs';
|
||||
const PDFJS_WORKER_URL = '/js/vendors/pdf.worker.min.mjs';
|
||||
|
||||
/**
|
||||
* use any type so tsc will not scan library
|
||||
* @type {any}
|
||||
* Memoized import of pdf.min.mjs (in-flight or settled).
|
||||
* use any type so tsc will not scan library.
|
||||
* Reset to null on failure so a later call retries (e.g. transient offline).
|
||||
* @type {Promise<any> | null}
|
||||
*/
|
||||
let _pdfjsLib = null;
|
||||
let _pdfjsLibPromise = null;
|
||||
|
||||
/** True once the worker script warm-up fetch has completed successfully. */
|
||||
let _pdfWorkerWarmed = false;
|
||||
|
||||
// TODO: do we need to add a max concurrncy ?
|
||||
|
||||
/**
|
||||
* Lazy-loads pdf.min.mjs on first use via dynamic import so it is never
|
||||
* bundled into the IIFE (it uses top-level await which breaks IIFE wrapping).
|
||||
* Memoizing the promise (rather than the resolved module) lets concurrent
|
||||
* callers — e.g. `preloadPdf()` racing the first real thumbnail — share a
|
||||
* single network fetch.
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
async function getPdfjsLib() {
|
||||
if (_pdfjsLib) return _pdfjsLib;
|
||||
// IMPORTANT: use an absolute path so the import resolves correctly both in
|
||||
// dev mode (native ESM, module at /js/features/thumbnail.js) and in release
|
||||
// mode (IIFE bundle at /js/app.{hash}.js — relative '../vendors/…' would
|
||||
// incorrectly resolve to /vendors/… instead of /js/vendors/…).
|
||||
const lib = '/js/vendors/pdf.min.mjs';
|
||||
_pdfjsLib = /** @type {any} */ (await import(lib));
|
||||
_pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/vendors/pdf.worker.min.mjs';
|
||||
return _pdfjsLib;
|
||||
function getPdfjsLib() {
|
||||
if (!_pdfjsLibPromise) {
|
||||
_pdfjsLibPromise = import(PDFJS_LIB_URL)
|
||||
.then((lib) => {
|
||||
lib.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_URL;
|
||||
return lib;
|
||||
})
|
||||
.catch((err) => {
|
||||
_pdfjsLibPromise = null; // allow retry after a failed load
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
return _pdfjsLibPromise;
|
||||
}
|
||||
|
||||
export const thumbnail = {
|
||||
@@ -43,6 +61,33 @@ export const thumbnail = {
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Fire-and-forget warm-up of the pdf.js stack (module + worker script).
|
||||
*
|
||||
* Called the moment a PDF row enters the DOM (see resourceIcon.js), so
|
||||
* the ~1.3 MB library downloads in the background while the user is
|
||||
* still looking at the list — instead of stalling the first thumbnail
|
||||
* render on it. Idempotent and cheap after the first call, and only
|
||||
* folders that actually contain PDFs ever pay the download.
|
||||
*/
|
||||
preloadPdf() {
|
||||
// Module (≈300 KB): shares the memoized promise with real users.
|
||||
getPdfjsLib().catch(() => {
|
||||
/* transient failure — the first real use retries */
|
||||
});
|
||||
|
||||
// Worker (≈1 MB): pdf.js only fetches it via `new Worker(...)` on the
|
||||
// first getDocument(), so prime the HTTP cache with a plain fetch.
|
||||
// Reading the body ensures the download completes and is cacheable.
|
||||
if (_pdfWorkerWarmed) return;
|
||||
_pdfWorkerWarmed = true;
|
||||
fetch(PDFJS_WORKER_URL)
|
||||
.then((r) => (r.ok ? r.blob() : Promise.reject(new Error(`HTTP ${r.status}`))))
|
||||
.catch(() => {
|
||||
_pdfWorkerWarmed = false; // allow retry on a later sighting
|
||||
});
|
||||
},
|
||||
|
||||
// TODO: use these informations from server ?
|
||||
SIZES: {
|
||||
icon: { width: 150, height: 150 },
|
||||
|
||||
Reference in New Issue
Block a user