Preloader on the checkout page

Hi,
I have a question: when navigating to the checkout page, the preloader does not appear. At the same time, when navigating to other pages, it works without any problems.

I even tried writing a custom preloader that should react to a GET /checkout request, but it still doesn’t show up.

The checkout page has many WooCommerce and payment system integrations Stripe, so it loads a bit slower than other pages. It would be great if the preloader was displayed there as well.

I couldn’t find a similar issue on the forum.
Could you please advise how this can be solved?

Thank you!

Hi,

Could you please clarify what you mean by loader in this case? If you are referring to the loading icon and the white screen that appears before a page is fully loaded, then yes — this is integrated into all pages via HTML. However, the issue may be that WooCommerce is overriding it.

Hi, yes, that’s exactly what I’m referring to.

When clicking, for example, on “Promote Job/Vacancy” or “Advertise Listing,” a GET request is sent to feature and checkout. The request is triggered and loading begins, but the page has not yet rendered. At this stage, the preloader (as shown in the screenshot) is not displayed, which is unusual, and I haven’t been able to trace why this is happening.

Do you think WooCommerce is actually overriding it even before the page starts rendering, and would it be sufficient to add the preloader directly into the checkout page’s HTML?

Could you please clarify if you’re using any third-party plugins or if there have been customizations made to the website?

We tried to reproduce the issue on the demo site, but were unable to do so.

Installed plugins:
WooCommerce
WooCommerce Stripe Gateway
Edit Checkout for WooCommerce
Loco Translate
LiteSpeed Cache
The problem is most likely that the checkout page does not render immediately, and at that moment there is no preloader, but when the page starts rendering, the preloader appears.

Have you tried disabling all third-party plugins to check if the issue persists?

The problem is most likely with the performance of the checkout page: the requests are being sent, but the page hasn’t rendered yet, and at that moment there is no loader. When the page starts rendering, the loader appears.
I’ll try to work on the performance so that the page renders immediately.

Please clarify the condition which way the call (click) to the checkout page is done cq established. Are these “Promote Job/Vacancy” or “Advertise Listing,” custom implementations?

For example the native situation when clicking the Buy Now button is, it will trigger the data-state=“loading” on the clicked submit button, and thus render a small spinner inside the button, and via Ajax submits a form and when done with the request it redirects to the checkout page which triggers the “global” spinner.

If your implementation is different perhaps this explains it. You might be taking all in one step, while the native hivepress does it in 2 steps (submit → redirect). The time wait is the same but the experience is different.

Hi,
For example, when clicking on Promote Job/Vacancy (the star icon) in Neework, two GET requests are sent:
/feature and /checkout
However, the checkout page doesn’t render immediately, and during this time there is no loader displayed.

The lack of spinner is not on the checkout, but on whatever page you click the star icon. Right?

If that is the case, it is not a problem with the checkout page, but it is simply the lack of UI feedback on the page the user interacts with.

Yes, exactly like that, the lack of spinner is not on the checkout, but on whatever page you click the star icon

The built-in theme preloader is pretty simple, it’s not linked to GET requests – the icon itself is added as HTML to the current page content and when the page is fully loaded, it’s hidden with JS hivetheme/assets/js/frontend.js at master · hivepress/hivetheme · GitHub I assume that WooCommerce loads the whole checkout page via AJAX and shows it’s own preloader, but the page itself is empty by default so the default preloader is hidden very quickly.

Hope this helps

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.