Как мне убрать мерцание на ценовых таблицах Stripe?

Вопрос или проблема

    import { Shell } from '@/components/shells/shell'
    import { getSessionUser } from '@/lib/db/users'
    import Stripe from '@/lib/stripe'
    
    export default async function Page() {
      const user = await getSessionUser()
      return (
        <Shell>
          <div className="mx-auto w-full max-w-6xl">
            <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
            <div
              dangerouslySetInnerHTML={{
                __html: `<stripe-pricing-table \
                  pricing-table-id="${Stripe.pricingTableID}" \
                  publishable-key="${Stripe.publishableKey}" \
                  client-reference-id="${user.id}" \
                ></stripe-pricing-table>`,
              }}
            />
          </div>
        </Shell>
      )
    }

Ответ или решение

Чтобы устранить мерцание, возникающее при использовании Stripe Pricing Tables на вашем React-сайте, следует обратиться к нескольким аспектам, связанным с реализацией и оптимизацией кода. Ниже представлен пошаговый подход к решению данной проблемы, что поможет обеспечить плавную загрузку без всплывающих анимаций.

1. Анализ проблемы

Мерцание обычно появляется из-за того, что контент загружается асинхронно, и HTML-элемент отображается до завершения загрузки всех ресурсов. В вашем случае это может быть связано с асинхронной загрузкой JavaScript-файлов, в частности stripe-pricing-table.js.

2. Избежание мерцания

Использование (or not using) dangerouslySetInnerHTML

Поскольку вы используете метод dangerouslySetInnerHTML, необходимо убедиться, что контент добавляется только после полной загрузки страницы. Однако данный подход может вызывать мерцание, так как весь контент добавляется сразу после загрузки скрипта.

Предложение:

Используйте состояние (state) в React для контроля отображения тегов, связанных со Stripe. Например:

import { useEffect, useState } from 'react';
import { Shell } from '@/components/shells/shell';
import { getSessionUser } from '@/lib/db/users';
import Stripe from '@/lib/stripe';

export default async function Page() {
  const user = await getSessionUser();
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://js.stripe.com/v3/pricing-table.js";
    script.async = true;
    script.onload = () => setIsLoaded(true);
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <Shell>
      <div className="mx-auto w-full max-w-6xl">
        {isLoaded && (
          <div
            dangerouslySetInnerHTML={{
              __html: `<stripe-pricing-table \
                pricing-table-id="${Stripe.pricingTableID}" \
                publishable-key="${Stripe.publishableKey}" \
                client-reference-id="${user.id}" \
              ></stripe-pricing-table>`,
            }}
          />
        )}
      </div>
    </Shell>
  );
}

3. Дальнейшие рекомендации по оптимизации

Кэширование ресурсов

Убедитесь, что браузеры могут кэшировать JavaScript-файлы Stripe. Это снизит время загрузки при последующих посещениях, что, в свою очередь, уменьшит вероятность появления мерцания.

CSS-стили

Рассмотрите возможность использования CSS для управления видимостью элемента stripe-pricing-table. Установите его стиль как display: none;, а после полной загрузки устанавливайте display: block;.

.stripe-table-hidden {
  display: none;
}

.stripe-table-visible {
  display: block;
}

Тогда ваш компонент может выглядеть так:

const [isLoaded, setIsLoaded] = useState(false);

...

return (
  <Shell>
    <div className="mx-auto w-full max-w-6xl">
      <div className={isLoaded ? "stripe-table-visible" : "stripe-table-hidden"}>
        <stripe-pricing-table ...></stripe-pricing-table>
      </div>
    </div>
  </Shell>
);

Анимация появлений

Если необходимо избежать анимаций, сразу отключите любые CSS-анимации или используйте параметр transition: none; в вашем CSS для элементов, чтобы элементы не производили непредвиденных эффектов во время загрузки.

4. Заключение

Следуя этим рекомендациям, вы сможете значительно уменьшить или полностью устранить мерцание при загрузке Stripe Pricing Tables на своем сайте. Внедрение состояния и правильное управление элементами DOM в React поможет добиться плавности и улучшить пользовательский опыт на вашем ресурсе.