如何在主页加载图像时显示微调器？答案

【问题标题】：How to show a spinner while loading an image in homepage?如何在主页加载图像时显示微调器？
【发布时间】：2022-06-14 03:24:21
【问题描述】：

我正在尝试在我的主页中添加一个微调器。我已经声明了另一个组件：

<Loading></Loading>

我在其中包含微调器。现在，如何在我的主页横幅部分中调用上述组件？

【问题讨论】：

欢迎来到 SO。 stackoverflow.com/help/how-to-ask

标签： reactjs image spinner

【解决方案1】：

您好，要显示一个微调器，您需要加载一些东西，因为大多数静态数据都会填充以非常快地显示。当您加载大数据或从数据库获取数据时，加载是好的。

这是一个很好的加载组件：

import React from 'react';

import './LoadingSpinner.css';

const LoadingSpinner = props => {
  return (
    <div className={`${props.asOverlay && 'loading-spinner__overlay'}`}>
      <div className="lds-dual-ring"></div>
    </div>
  );
};

export default LoadingSpinner;

一些 CSS：

.lds-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
}

.lds-dual-ring:after {
  content: ' ';
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #510077;
  border-color: #510077 transparent #510077 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

.loading-spinner__overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

现在，使用它（从数据库加载用户的示例）：

const Users = () => {
  const { isLoading, error, sendRequest, clearError } = useHttpClient();
  const [loadedUsers, setLoadedUsers] = useState();

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        //with fetch, the default request type is GET request
        const responseData = await sendRequest(
          process.env.REACT_APP_BACKEND_URL + "/users"
        );
        setLoadedUsers(responseData.users); 
      } catch (err) {}
    };
    fetchUsers();
  }, [sendRequest]);

  return (
    <React.Fragment>
      {isLoading && (
        <div className="center">
          <LoadingSpinner />
        </div>
      )}
      {/* we need to render loadedUsers only if not empty*/}
      {!isLoading && loadedUsers && <UsersList items={loadedUsers} />}
    </React.Fragment>
  );
};

【讨论】：