Checkout stuck step 2 (payment)

Question

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

1. Magento CE 2.1.0
2. Production mode & Varnish
3. Firefox latest version & Chrome latest versions

Steps to reproduce

1. Add product to basket
2. Navigate to checkout page
3. Enter billing address and select shipping method
4. 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

Answer 1

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 theme

magento/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 methods

So you need to replace them with fullScreenLoader.stopLoader(true); which will force stop the loader and resolve the issue.

stopLoader() method is defined in vendor/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.