How can I paint and include a simple loading until the element component renders?

[How can I paint and include a simple load until two seconds after the Item.js component renders? I’ve tried to do it with conditionals but I can’t find a way

should i do a conditional by creating a state and referring to whether state is true or false run the map on the mambo state array?
]

const ItemList = () => {
const [collection, setCollection] = useState([]);
const [mambos, setMambos] = useState([]);
useEffect(() => {
  const promesa = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id === "1") {
        resolve(PRODUCTS[0]);
      } else if (id === "2") {
        resolve(PRODUCTS[2]);
      } else if (id === "3") {
        resolve(PRODUCTS[1]);
      } else if (id === "4") {
        resolve(PRODUCTS[3]);
      } else if (id === "5") {
        resolve(PRODUCTS[4]);
      } else {
        reject(
          "Hubo un problema con la carga de elementos, intentalo mas tarde..."
        );
      }
    }, 2000);
  });
  promesa
    .then((rta) => {
        setMambos(rta.items);
        setCollection(rta);
    })
    .catch((err) => err);
}, [id, mambos, collection]);
 
return (
  <div>
    <h1
    >
      <CollectionTitle />
    </h1>
    {mambos.map(({ id, ...otherProps }) => <Item key={id} {...otherProps} />)
    )}
  </div>
);
};