Update UX for quick order list mobile view

[lhoffbeck]

PR Summary:

Updates quick order list mobile view to hide the remove all button if the product has no variants in the cart, and display the loading spinner for pending requests.

Why are these changes introduced?

Found this behavior while testing V15.3.0 release and it seemed unexpected, confirmed desired behavior with @Oliviammarcello from UX. From the existing code it looks like this was the original intent and probably just got missed at some point.

Note there is a layout shift when the button is shown/hidden. Olivia and I paired and determined the layout shift is preferable to maintaining the spacing, since (1) that makes it seem like the component padding is incorrect and (2) we already have a layout shift when going through the remove all flow already.

Before

https://screenshot.click/26-59-n5ou5-3gs0f.mp4

After

https://screenshot.click/26-57-n82jf-ggk7a.mp4

Demo links

• https://admin.shopify.com/store/os2-demo/themes/174907195414/editor?previewPath=%2Fproducts%2F100-variant-product&section=template--24194134900758__quick_order_list_r9a7rM&category=gid%3A%2F%2Fshopify%2FOnlineStoreThemeSettingsCategory%2FTypography%3Ftheme_id%3D174907195414%26first_setting_id%3Dtype_header_font

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[lhoffbeck]

no-js-hidden is a legacy class that used to hide this element if the user had js disabled. We don't support no-JS anymore since checkout requires JS so the class doesn't actually do anything.

[Oliviammarcello]

Works as expected, TY!

[LA1CH3]

Changes LGTM.

I did however, notice a different bug that I assume is unrelated. It looks like if I paginate to a page other than the first page, add quantities, and then "Remove all", the quantity switcher for that item still shows the stale quantity. Works correctly on the first page, though.

remove-all-bug.mp4

[lhoffbeck]

did however, notice a different bug that I assume is unrelated. It looks like if I paginate to a page other than the first page, add quantities, and then "Remove all", the quantity switcher for that item still shows the stale quantity. Works correctly on the first page, though.

Yeah good catch, I dug into that some yesterday and found it's an API issue. Once the API is fixed we should double check that the theme code is still okay but that should fix it.