JSFiddle - React, Tailwind, and code Playground

HTML

<img id="imgpng" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSofPIzPPpL-LvOF9j6biu7icRFoX3pmHw9gTVg4yli55uCg7vO">
<img id="gif" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSofPIzPPpL-LvOF9j6biu7icRFoX3pmHw9gTVg4yli55uCg7vO" class="invis">
<button>
Click me pls!
</button>

CSS

img{
    width:100px;
    height:100px;
    display:block;
}
.invis {
  width: 0;
  height: 0;
}

JavaScript

jQuery(function(){
    var image = new Image();
		image.src='https://www.gifbin.com/bin/072010/1280482491_dealwithit-the-long-version.gif';
    
    $('button').click(function(){
    	// HIDE the button and normal img
     	$(this).hide();
    	$('#imgpng').hide();
      
      // "refresh" the gif and remove the invis class (when using display none the gif somehow won't be refreshed)
      $('#gif').attr('src',image.src).removeClass('invis');
      
      // timer, which hides gif and shows image and button again
      setTimeout(function(){
	      $('#gif').addClass('invis');
        $('#imgpng').show();
        $('button').show();
      }, 2000)
    });
});