import React from "react";
import styles from "./index.module.scss";
import { Spin } from "antd";
import classNames from "classnames";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

type Props = {
  id: number;
};

function ImgLoding({ id }: Props) {
  // 图片已经加载完成的仓库数组（id）
  const imgLodingArr = useSelector(
    (state: RootState) => state.A0layout.imgLodingArr
  );

  return (
    <div
      className={classNames(
        styles.ImgLoding,
        imgLodingArr.includes(id) ? styles.ImgLodingNo : ""
      )}
    >
      <Spin size="large" />
    </div>
  );
}

const MemoImgLoding = React.memo(ImgLoding);

export default MemoImgLoding;
