Edit product page freezes for complex products

openfoodfacts / openfoodfacts-server

Open Food Facts database, API server and web interface - 🐪🦋 Perl, CSS and JS coders welcome 😊 For helping in Python, see Robotoff or taxonomy-editor

http://openfoodfacts.github.io/openfoodfacts-server/

GNU Affero General Public License v3.0

653 stars 383 forks source link

Edit product page freezes for complex products #6222

Open aquilax opened 2 years ago

aquilax commented 2 years ago

What

Opening the edit page for products with multiple languages and images freezes the page for several minutes before it becomes responsive again

To Reproduce

Log in to https://world.openfoodfacts.org/
Open https://world.openfoodfacts.org/cgi/product.pl?type=edit&code=3274080005003
Try to click on any field

Expected behavior

Page to be responsive withing 30 seconds

Screenshots

Screenshot_2021-12-25_16-11-38 Screenshot_2021-12-25_16-12-56

Additional context

JS Heap grew up to 145 169 532.

Browser version

Chrome Version 96.0.4664.110 (Official Build) (64-bit)

Part of

8764

stephanegigandet commented 2 years ago

I'm not sure what would be the best way to solve that. Maybe some lazy loading of images, showing only the last 10 images uploaded or something, with a way to load more. It certainly isn't useful to load tons of images when someone just wants to update one field somewhere. My javascript isn't good enough to fix this though.

alexgarel commented 2 years ago

I think we may find a small JS lib that does this.

Something like https://www.jqueryscript.net/loading/Asynchronous-Image-Loading-jQuery-hbaLoadImages.html

or https://www.jqueryscript.net/loading/image-lazy-rate.html

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 90 days with no activity.