Skip to content

[J4] Media Manager UX/Performance Improvements #36533

@crystalenka

Description

@crystalenka

Is your feature request related to a problem? Please describe.

When using the native Joomla 4 media manager to select an image, there are several usability issues as an end user:

  • If the images in a folder are very large, or there are many images, it is very slow to load the folder (up to 2 minutes) - even on a very fast fiber internet connection. (I was testing on a site with only 100 images per folder, but some were large images up to 10 MB.)
  • While loading a slow folder, you are not able to navigate to another folder until the first one is completely done loading.
  • The component view of the media manager seems to cache the images for display so it's a bit faster, but I didn't notice any caching at all in the image selection view.

Describe the solution you'd like

There are several possible solutions that would help mitigate the slow loading - any or all of them would help:

  • Allow images in the media manager to lazy load so it doesn't take up resources loading off-screen images
  • Add (user-configurable?) pagination to the media manager in large folders
  • Automatically generate thumbnail images for images on upload and use those when picking an image - don't need to load a 3000px image when it's only being displayed at ~200px wide.
  • Cache images in the image selection view so once it's loaded it doesn't have to be loaded from scratch again for the next image field.

I don't know how to fix not being able to navigate folders until the first one is done loading.

Additional context

Before opening this issue I did some looking around at past issues. This has been a hot topic in the past without any resolution for over a year, it would be nice to solve it now. :)

I noticed that the media manager is not loading inline images (with <img> tags), but instead it's setting the images as background images of divs. This seems inefficient but I'm not sure of the direct performance impact. This would definitely be a roadblock to adding native lazy loading though.

I would open a PR to try to solve some of these issues but it seems the media manager is written in Vue.js, making it completely beyond my skill set.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions