When I click on search button, I get a list of top tracks in my React-Redux app.

When the results are loading, I get the container box-shadow for each rendered track before the track is fully loaded. Like so:

[![enter image description here](https://i.stack.imgur.com/xqiUy.png)](https://i.stack.imgur.com/xqiUy.png)

**JS:**

```
const TopTracks = ({ track }) => {
  return (
    <div>
      <iframe
        src={`https://open.spotify.com/embed/track/${track.id}`}
        title={track.name}
        width="300"
        height="80"
        allowtransparency="true"
        allow="encrypted-media"
        className="tracks"
      ></iframe>
    </div>
  );
};

export default TopTracks;

```

**CSS:**

```
.tracks {
  margin-bottom: 0.75em;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

```

**Is there any way for these shadow effects to not show before the element is fully loaded?**