Spinner not being displayed while payment is being processed.

How can we fix this?

Thx!

I messing around with the spinner, cause it’s not the coolest I have seen…. So I came across some snippets that should deactivate styles of your spinner. More specifically:

Position Results

add_filter( 'relevanssi_live_search_base_styles', '__return_false' );

and then this that is totally unclear to me:

add_action(
  'wp_enqueueu_scripts', 
  function() {
    wp_dequeue_style( 'relevanssi-live-search' );
  },
  99
);

I tried adding the latter only to functions.php but I see no change….

I am trying to go here…. the Html Structure where loader is the class:

<span class="loader"></span>

And the css goes like so:

.loader {
        transform: rotateZ(45deg);
        perspective: 1000px;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        color: #fff;
      }
        .loader:before,
        .loader:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: inherit;
          height: inherit;
          border-radius: 50%;
          transform: rotateX(70deg);
          animation: 1s spin linear infinite;
        }
        .loader:after {
          color: #FF3D00;
          transform: rotateY(70deg);
          animation-delay: .4s;
        }

      @keyframes rotate {
        0% {
          transform: translate(-50%, -50%) rotateZ(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotateZ(360deg);
        }
      }

      @keyframes rotateccw {
        0% {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }

      @keyframes spin {
        0%,
        100% {
          box-shadow: .2em 0px 0 0px currentcolor;
        }
        12% {
          box-shadow: .2em .2em 0 0 currentcolor;
        }
        25% {
          box-shadow: 0 .2em 0 0px currentcolor;
        }
        37% {
          box-shadow: -.2em .2em 0 0 currentcolor;
        }
        50% {
          box-shadow: -.2em 0 0 0 currentcolor;
        }
        62% {
          box-shadow: -.2em -.2em 0 0 currentcolor;
        }
        75% {
          box-shadow: 0px -.2em 0 0 currentcolor;
        }
        87% {
          box-shadow: .2em -.2em 0 0 currentcolor;
        }
      }
   

I tried replacing “.loader” with “.rlv-has-spinner” and then I see a freaky combination of the two where your spinner is still dominating the show. So how can I achieve this?

On my site in main menu > search, I trigger SearchWP Modal. And there the java thing trigger when searching. You are welcome to give it a try. “Art” or “Artist” will yield a number of hits. I hope this is possible.

Thx

Our environment: PHP 8.2.24 or PHP 8.4.0, Avada 7.11.11, and WP 6.6.2.

To address the above, I followed your recommendation (provided in previous topic) to downgrade from V0.1.1 to V0.0.8 , and everything now runs a lot better (i.e., no spinner visible, data loads in 1 to 2 seconds).

Perhaps the issue lies in the code used for AJAX-loading the spinner.

Any plans to fix the above issue anytime soon?

Thank you!

Here is my code for index.js:

import React, { useState, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { registerPaymentMethod } from '@woocommerce/blocks-registry';
import { useDispatch, useSelect } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { getSetting } from '@woocommerce/settings';
import { PAYMENT_STORE_KEY } from '@woocommerce/block-data'; // "wc/store/payment"
import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
import { subscribe, select } from '@wordpress/data';
import { Spinner } from '@wordpress/components'; 

const settings = getSetting('payment_method_custom_data', {});
let previouslyChosenPaymentMethod = getSetting('payment_method_custom_data', {});

subscribe(function () {
	const chosenPaymentMethod = select(PAYMENT_STORE_KEY).getActivePaymentMethod();

	if (chosenPaymentMethod !== previouslyChosenPaymentMethod) {
		previouslyChosenPaymentMethod = chosenPaymentMethod;
		console.log(chosenPaymentMethod);
		extensionCartUpdate({
			namespace: 'payment_method_custom',
			data: { method: chosenPaymentMethod },
		});
	}
}, PAYMENT_STORE_KEY);


const defaultLabel = __(
	'Payment Method Custom',
	'woo-gutenberg-products-block'
);

//console.log('Payment settings:', settings);

const label = decodeEntities(settings.title) || defaultLabel;

/**
 * Content component
 */
const Content = () => {

	const [isLoading, setIsLoading] = useState(false);

	useEffect(() => {
		const fetchData = async () => {
			setIsLoading(true);
			await new Promise((resolve) => setTimeout(resolve, 4000));
			setIsLoading(false);
		};

		fetchData();
	}, []);

	return isLoading ? (
		<Spinner />
	) : (
		decodeEntities(settings.description || '')
	);
};

/**
 * Label component
 *
 */
const Label = (props) => {
	const [isLoading, setIsLoading] = useState(false);
	const { PaymentMethodLabel } = props.components;

	return (
		<div>
			{isLoading ? (
				<Spinner />
			) : (
				<PaymentMethodLabel text={label} />
			)}
		</div>
	);
};

const paymentMethod = {
	name: "payment_method_custom",
	label: <Label />,
	content: <Content />,
	edit: <Content />,
	canMakePayment: () => true,
	paymentMethodId: 'payment_method_custom',
	ariaLabel: label,
	supports: {
		features: settings.supports,
	},
};

registerPaymentMethod(paymentMethod);

Amazing plugin. One small thing …

Can you guys provide a code snippet or CSS rule that will allow us to change the spinner (gif) that appears when we navigate from one tab to another? (or delete it altogether)

Thank you!

In the code I can see it is here:
/images/spinner.gif

… but there is no images folder in the plugin.

I have added the Google listings and ad plugin but I can only see a spinner in the admin. When the page reloads I can se some content for a few second which is replaces with the spinner.

I have tried to deactivate all other plugins but no luck.

Can you help with what the issue can be?