Page MenuHomePhabricator

Improve UX and Performance for Long Wikidata Statement Lists even more (and other long lists with renderer/display functions)
Open, Needs TriagePublic

Description

Follow up of: https://phabricator.wikimedia.org/T406612.

Summary:
Wikidata statements lists can become extremely long (700+ statements), and currently all renderer/display functions are triggered on load. This leads to performance issues, API overload (orchestrator), and poor user experience, especially since many statements are not immediately visible. We need a UX and technical solution to handle long statement lists efficiently.

Problem:

  • Long lists of statements trigger rendering for all items at once.
  • Loading and rendering hundreds of statements causes slow performance.
  • API requests may be excessive and unnecessary.
  • Most statements are not visible on initial page load, making the current approach inefficient.

Example:

  1. go to https://www.wikifunctions.org/wiki/Z22220
  2. fill in Netherlands
  3. press 'run'
  4. try to scroll the list and see how the page almost freezes

Proposed Solution / Ideas:

  • Implement lazy loading of statements: only fetch/render statements when they come into the viewport.
  • Use a modal/dialog approach to display detailed statement lists on demand, instead of rendering everything inline.
  • Consider virtualization of the list to improve performance for very long lists.

Benefits:

  • Improved initial page load speed.
  • Reduced API usage.
  • Better overall user experience for pages with very large statement lists.

Additional Notes:

  • This should be compatible with existing renderers.
  • Keep the solution scalable

Event Timeline

DSmit-WMF renamed this task from Improve UX and Performance for Long Wikidata Statement Lists even more to Improve UX and Performance for Long Wikidata Statement Lists even more (and other long lists with renderer/display functions).
Jdforrester-WMF subscribed.

Needs some thinking about what we actually want the user to do in these cases, and how we can help them make it happen without crashing their browser.