Add a "Loading..." message while the Google Custom Search bar is still not visible, then remove the message when it is already visible

Question

I am using a Google Custom Search bar and it takes several seconds for the search bar to display on the page. Because of this, I want to add a "Loading.." message while the search bar is still not displayed, then remove the message by the time the search bar is already visible (whether the page is fully loaded is not important).

I searched on the web and tried modifying the Google Custom Search script based on an answer from here (onreadystatechange). But I cannot get it to work as intended since the "Loading..." message disappears about halfway from the time the search bar becomes visible:

<p id="loading-msg"></p>

<script>
    var loadingMsgEl = document.getElementById("loading-msg");
    loadingMsgEl.innerHTML = "Loading...";

  (function() {
    var cx = 'xxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);

    gcse.onreadystatechange = gcse.onload = function() {
    loadingMsgEl.innerHTML = "";
    };
  })();
</script>