首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当条状载荷发生时,反应悬念(或等效)

当条状载荷发生时,反应悬念(或等效)
EN

Stack Overflow用户
提问于 2022-07-09 17:02:10
回答 1查看 181关注 0票数 0

我遇到了一个问题,Stripe对大多数用户的PaymentElement加载反应非常慢(我不能复制这种行为,但PageSpeed不喜欢它,AWS CloudWatch RUM正在报告糟糕的用户页面加载和时间交互数字)。

我想通过延迟加载Stripe PaymentElement来解决这个问题。我现在拥有的是:

代码语言:javascript
复制
// 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秒内,我的一些用户需要实际加载表单。

EN

回答 1

Stack Overflow用户

发布于 2022-07-11 03:32:20

您可以尝试选项“装载机”。将其设置为always

在安装元素之后,在等待完全加载元素时,显示骨架加载程序UI。默认值为“auto”(Stripe确定是否应该显示加载程序UI )。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72923249

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档