如何消除Stripe定价表格的闪烁及加载动画问题

一、消除加载闪烁 #

闪烁核心原因是脚本加载延迟导致定价表晚于页面其他内容渲染，可通过以下方式解决：

1. 预加载Stripe脚本
   在根布局文件（如layout.tsx）的<head>中添加预加载指令，让浏览器提前加载定价表脚本：

<link rel="preload" href="https://js.stripe.com/v3/pricing-table.js" as="script">

2. 添加占位容器避免布局偏移
   给定价表容器设置固定最小高度和骨架屏样式，直到组件加载完成，避免页面跳动：

// 客户端组件中使用占位
<div className="min-h-[400px] bg-gray-50 animate-pulse">
  {/* 定价表加载后替换此占位 */}
</div>

3. 优化组件加载逻辑
   将定价表封装为客户端组件，确保脚本加载完成后再渲染组件，替代直接用dangerouslySetInnerHTML插入的方式：

'use client';

import { useEffect, useRef, useState } from 'react';
import Stripe from '@/lib/stripe';

export default function StripePricingTable({ clientReferenceId }) {
  const containerRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);

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

    const initPricingTable = () => {
      if (!containerRef.current) return;
      containerRef.current.innerHTML = `
        <stripe-pricing-table
          pricing-table-id="${Stripe.pricingTableID}"
          publishable-key="${Stripe.publishableKey}"
          client-reference-id="${clientReferenceId}"
        ></stripe-pricing-table>
      `;
      setIsLoaded(true);
    };

    // 检查脚本是否已加载
    if (document.querySelector('script[src="https://js.stripe.com/v3/pricing-table.js"]')) {
      initPricingTable();
    } else {
      loadScript();
    }

    return () => containerRef.current && (containerRef.current.innerHTML = '');
  }, [clientReferenceId]);

  return (
    <div 
      ref={containerRef}
      className={`mx-auto w-full max-w-6xl ${!isLoaded ? 'min-h-[400px] bg-gray-50 animate-pulse' : ''}`}
    />
  );
}

之后在服务端页面中引入该客户端组件：

import { Shell } from '@/components/shells/shell';
import { getSessionUser } from '@/lib/db/users';
import StripePricingTable from '@/components/StripePricingTable';

export default async function Page() {
  const user = await getSessionUser();
  return (
    <Shell>
      <StripePricingTable clientReferenceId={user.id} />
    </Shell>
  );
}

二、移除默认动画 #

Stripe定价表自带入场动画，通过全局CSS强制覆盖即可移除：

/* 在globals.css中添加 */
stripe-pricing-table,
stripe-pricing-table * {
  animation: none !important;
  transition: none !important;
}

内容的提问来源于stack exchange，提问作者Michael Ozeryansky