Openfoodnetwork: Bulk product and orders pages should show 'loading' when still loading, rather than 'none found'

[kirstenalarsen]

Description

Confusing UX while filters are being applied on products, while info corresponding to filters are loading, "none found" message is displayed.

Expected Behavior

When filter is applied and data are loading, a message "loading data" should be shown, like https://www.useloom.com/share/b36dec611e1c488c9872c6c8be2491ed

Actual Behavior

See exemple from Product Import tests: https://www.useloom.com/share/41d9581879234356ad8b990d8ee29ef1
Only happen in some circumstances, I guess when lots of things to calculate...

Steps to Reproduce

1. Go to "products" and select a shop for instance with many product.
2. OR when product import available try to import a file and at the last step, click on "check product", you are redirected to product page and it takes 10 sec before the products appear, and meanwhile you see "no product found"... if you are not patient enough you just think it is broken.

Animated Gif/Screenshot

Context

Reported by Kirsten, Myriam hit again that issue while testing product upload, that was VERY confusing as a user, and moste user using product import will hit it, so will set up a high priority.

Severity

S2 - most users will be concerned using product imports (and not only, basically all users), very confusing in term of UX and no workaround on UX! The feature can be used but it appears it's not working, so might appear it is broken.

Your Environment

• Version used: 1.10.1
• Browser name and version: Version 64.0.3282.167 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Ubuntu 16.04 LTS

Possible fix

[luisramos0]

Hi, I cant replicate, I guess I need (a lot) more products in the db.
@myriamboure can you share a product list that I can import into my local db?
Thanks.

[frank-west-iii]

This one may be a tough one to solve. The problem lies within the asynchronous nature of how we load this page. It does not have anything to do necessarily with how many products a single producer has, but rather how many products from other producers are loaded before theirs are loaded onto the page.

When we first open the page we flag the page as loading. Then we fire off the process to fetch data:

Step 1:
https://github.com/openfoodfoundation/openfoodnetwork/blob/61f303ced2a5fbd3620abb1f0e2622862bc573a4/app/assets/javascripts/admin/bulk_product_update.js.coffee#L52

Step 2:
https://github.com/openfoodfoundation/openfoodnetwork/blob/61f303ced2a5fbd3620abb1f0e2622862bc573a4/app/assets/javascripts/admin/services/bulk_products.js.coffee#L11

Step 3:
https://github.com/openfoodfoundation/openfoodnetwork/blob/61f303ced2a5fbd3620abb1f0e2622862bc573a4/app/assets/javascripts/admin/index_utils/services/paged_fetcher.js.coffee#L6

Since all of this completes before the paged fetching is finished we flag the page as not loading. If no products have finished fetching for the producer you select in the filters it will show the no products message.

Right off the bat I don't see a clean easy solution without breaking current functionality of paged fetching.

@luisramos0, any thoughts here?

[luisramos0]

ok, so the bug is that the code loads the first data page from the server and shows it synchronously and then goes to load the rest of the data pages asynchronously. the problem is that if the filters exclude all the results fetched on the first data page, it will show "no products" while it's fetching the rest of the pages. when the other pages load, it will replace the "no products" message with the products that came on the following data pages and pass the filters criteria.

Pull #2389 is the simple fix. It fetches all pages before resolving the promise (and showing results). "Loading" message will be displayed until the last data page is fetched. The list showed will always be complete and correct. If gradual loading is done, the list can always be incomplete depending on the filters.

There are other not so easy possible solutions here. Like making page load synchronous only if there are no products matching the filters on the first page... we wouldn't see the "no products" message but the list of products could be incomplete which would make for a poor UX as well...

What do you guys think?

[luisramos0]

Note: there's some fun "coffee script versus promises" in the commit, if anyone is interested.

[myriamboure]

Cool @luisramos0 great you found a solution and thank you @frank-west-iii for your tips ;-) I'm not tech myself so will let devs see if that sounds all good ! Cheers

[frank-west-iii]

@luisramos0 and @myriamboure, I will also leave this up to the team. It changes the user experience a bit. The user will see a loading screen for longer than they previously would. However, given the simple fix and improved user experience overall I am not sure that the effort for a different fix would be worth it.