reactjs - React - 在最短持续时间内显示加载旋转器

Question

我有 2 个问题...

1. 在注册提交过程中，我需要显示一个 Loading 组件，直到从服务器收到响应。

加载组件未渲染:

const Register: FC<RouteComponentProps> = () => {

  const [loading, setLoading] = useState<boolean>(false)
  const [success, setSuccess] = useState<boolean>(false)
...

const onSubmit = async(values: Values) => {

  setLoading(true)
  try {
    const response = await register({
      variables: { data: { firstName: values.first_name, lastName: values.last_name, email: values.user_email, password: values.password } }
    })
    setLoading(false)
    if (response && response.data && response.data.register) {
      setSuccess(true)
    }
  } catch (error) {

     setLoading(false)
     ...

  }
}

return (
   ...
   { loading && <Loading/> }
)

我哪里错了，请告诉我。

有时您会发现某些网络请求相对较快(< 0.5 秒)。在这种情况下，旋转器将在网页中闪烁，用户没有足够的时间来了解发生了什么。为了避免网页 DOM 发生剧烈变化并减少用户的困惑，无论加载数据需要多少时间，最好显示微调器的时间最短(例如 1 秒)。我怎样才能实现这一目标？

谢谢!

Answer 1

您不需要将加载显示为至少 1 秒，因为在获取数据时已经显示加载图标，而在现实生活中，它将超过 1 秒。

如果你想设置分钟 1 秒

  try {
    const response = await register({
      variables: { data: { firstName: values.first_name, lastName: values.last_name, email: values.user_email, password: values.password } }
    })
//change here
 setTimeout(() => setLoading(false), 1000);