jQuery and Giphy - Set Background Image after downloading

Question

I am randomly getting gifs from GIPHY and want to set them as the background image of my body. On click, a new random gif should be displayed. I've got this part working however, I want to wait until the whole gif is downloaded until setting the next background image. Ideally, until this happens, a loader gif should be displayed. How can I do this?

This is the code I have so far:

$(document).ready(function() {
// Giphy API defaults
const giphy = {
    baseURL: "https://api.giphy.com/v1/gifs/",
    key: "API_KEY_HERE",
    tag: "people",
    type: "random",
    rating: "pg-13"
};
// Target gif-wrap container
const $gif_wrap = $("body");
// Giphy API URL
let giphyURL = encodeURI(
    giphy.baseURL +
        giphy.type +
        "?api_key=" +
        giphy.key +
        "&tag=" +
        giphy.tag +
        "&rating=" +
        giphy.rating
);

// Call Giphy API and render data
var newGif = () => $.getJSON(giphyURL, json => renderGif(json.data));

// Display Gif in gif wrap container
var renderGif = _giphy => {
    // Set gif as bg image
    $gif_wrap.css({
        "background-image": 'url("' + _giphy.image_original_url + '")'
    });
};

newGif();

$(document).click(function() {
newGif();
});

// Call Giphy API for new gif
newGif();

});