Image loader solution

I built this little page to just test the tenor api in calling random gifs(not jifs)

Though the App Connect loader is cool, I wanted a solution that would just display that an image is reloading when a user searches and re-searches.

I tried a method shown with the dynamic lazy load tutorial from @Teodor but could not get it working. My loader gif remained despite the api returning a new dynamic image url.

So I added a container and an absolute positioned container within with an animated gif background that displays while the API call is executing.

HTML:

<div class="results">
	<div class="loading" dmx-show="api_gif.data.results[0].media[0].gif.url">
		<img class="wappler-type-picture w-100 img-fluid" dmx-bind:src="api_gif.data.results[0].media[0].gif.url" dmx-hide="api_gif.state.executing">
	</div>
</div>

CSS

.results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url("../img/PlaceHolder.gif");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 200px;
}

You can see the the page and loader here:

https://pixlapps.com/givagif/

Any suggestions to do this better would be welcome?