I have magento 2 running on live project and our clients are seeing some weird issue on Firefox browser and Chrome as well. I was able to reproduce it only once and after refreshing the page everything is working as expected. I will be happy if someone have/had similar issue and have some information how to debug/fix it.
Preconditions
- Magento CE 2.1.0
- Production mode & Varnish
- Firefox latest version & Chrome latest versions
Steps to reproduce
- Add product to basket
- Navigate to checkout page
- Enter billing address and select shipping method
- Click Next button to open payment section
Expected result:
Display loader icon, load payment section and cart summary, hide loader icon
Actual results:
Display loader icon, load payment section and cart summary, loader icon doesn't hide and stay.
No JS errors on console or network tab in FF (ajax request to getting payment section). After refresh with #payment in URL everything is working fine. Even if open /checkout without #payment (start from 1st step) it's opening 2nd step smoothly.
I raised issue in github: https://github.com/magento/magento2/issues/7186
Best Answer
This issue is still not fixed but there is a workaround from @dcabrejasazagra here
Workaround:
Override
vendor/magento/module-checkout/view/frontend/web/js/model/shipping-save-processor/default.js
into your thememagento/app/design/frontend/Vendor/Theme/Magento_Checkout/web/js/model/shipping-save-processor/default.js
Inside this file you will find
fullScreenLoader.stopLoader();
called on done and fail methodsSo you need to replace them with
fullScreenLoader.stopLoader(true);
which will force stop the loader and resolve the issue.stopLoader()
method is defined invendor/magento/module-checkout/view/frontend/web/js/model/full-screen-loader.js
Edit: I assume that some component fails on the checkout and trigger .fail() method but the error processor is not handling errors correctly and display errors and hides the loader.