Skip to content

fix(frontend): prevent Resources page freeze with large libraries - #410

Open
Ashfaqbs wants to merge 1 commit into
vxcontrol:mainfrom
Ashfaqbs:fix/resources-large-library-prompt
Open

Ashfaqbs wants to merge 1 commit into
vxcontrol:mainfrom
Ashfaqbs:fix/resources-large-library-prompt

Conversation

@Ashfaqbs

Copy link
Copy Markdown

Summary

Fixes #403.

With ~100k resource entries, the Resources page fetches the full recursive library (already the intended REST behaviour) and then mounts every entry into the FileManager tree in one go. FileManager has no row virtualization, so building and rendering tens of thousands of DOM nodes blocks the main thread on first paint — the page freezes and appears empty, matching the report exactly.

This PR adds a small guard rather than a full virtualization rewrite (which would touch the tree-building, keyboard nav, selection, and DnD code paths and deserves its own focused PR/discussion): above LARGE_LIBRARY_PROMPT_THRESHOLD (5000) entries, if there's no active search query, the page shows a "Large resource library — search to narrow it down" prompt instead of mounting FileManager with the full unfiltered set. Once the user types a query, the existing FileManager render path (including its own client-side filtering) is used unchanged.

This directly prevents the freeze-on-load scenario from the issue without touching FileManager internals, the REST/GraphQL contract, or any of the move/copy/search logic that assumes the full resource list is available in memory.

  • frontend/src/features/resources/resources-constants.ts: new LARGE_LIBRARY_PROMPT_THRESHOLD constant.
  • frontend/src/features/resources/resources-utils.ts: new pure shouldPromptToSearchLargeLibrary helper.
  • frontend/src/pages/resources/resources.tsx: use the helper to swap in a prompt state instead of mounting FileManager when the library is too large and unfiltered.

Full virtualization of the tree would still be worth doing as a follow-up for a smoother browsing experience on huge libraries, but this is a self-contained fix for the reported crash.

Test plan

  • Added resources-utils.test.ts covering the new helper's threshold/query logic
  • pnpm exec tsc --noEmit — clean
  • pnpm exec eslint on all changed files — clean
  • pnpm exec prettier --check on all changed files — clean
  • pnpm exec vitest run — new tests pass; ran the full suite and confirmed the pre-existing failures (review-sandbox.unit.test.ts, markdown-editor-field.test.tsx) are present on an unmodified checkout too, unrelated to this change

The FileManager tree has no row virtualization, so mounting tens of
thousands of rows on first paint blocks the main thread and the page
appears empty (fixes vxcontrol#403). Above LARGE_LIBRARY_PROMPT_THRESHOLD (5000)
entries, prompt the user to search instead of eagerly rendering the
whole library; once a query is active the existing FileManager render
path is unchanged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Resources page freezes with large resource libraries

1 participant