我遇到了一个问题,Stripe对大多数用户的PaymentElement加载反应非常慢(我不能复制这种行为,但PageSpeed不喜欢它,AWS CloudWatch RUM正在报告糟糕的用户页面加载和时间交互数字)。
我想通过延迟加载Stripe PaymentElement来解决这个问题。我现在拥有的是:
// Lazy-load PaymentElement even though not default export
const PaymentElement = React.lazy(() =>
import('@stripe/react-stripe-js').then(module => {
return { default: module.PaymentElement };
})
const CheckoutForm = () => {
// ...
return (
<form onSubmit={handleSubmit}>
<Suspense fallback={<StripePlaceholder />}>
<PaymentElement />
</Suspense>
</form>
);
};我遇到的问题是,我的<StripePlaceholder />回退呈现了一点,但随后消失了,即使是在笔记本电脑上的快速连接上,在它消失的时间(我猜这意味着<PaymentElement />已经“呈现”了)和表单实际出现的时间之间仍然存在很大的视觉延迟--我认为这是组件呈现和iframe加载之间的区别。
在iframe加载时,有什么方法可以让占位符保持在位置吗?我不喜欢懒惰/悬念的方法-我只想要一些占位符在表面上5-10秒内,我的一些用户需要实际加载表单。
发布于 2022-07-11 03:32:20
您可以尝试选项“装载机”。将其设置为always。
在安装元素之后,在等待完全加载元素时,显示骨架加载程序UI。默认值为“auto”(Stripe确定是否应该显示加载程序UI )。
https://stackoverflow.com/questions/72923249
复制相似问题