My challenge involves a select drop down that is being dynamically built. To handle this, I have implemented a setTimeout function to change the selected option after a 3-second delay. This allows the select element to load first before I manipulate it. However, I would like to enhance this functionality by hiding the select element initially, displaying a loading gif, and then revealing the select element with the forced option after the 3 seconds have elapsed.
If you'd like to see my progress so far, feel free to check out this JSFiddle: https://jsfiddle.net/88ot9vya/1/
Currently, I am using the following setTimeout function to change the option successfully:
setTimeout(function () {
$('#txtShipAddress>option:eq(0)').prop('selected', true);
}, 3000);
My question now is, how can I incorporate a loading gif before initiating the setTimeout function, then reveal the select element while hiding the loading gif after the delay? Feel free to use any loading gif example, such as this one: