How can I make immediate load on JavaScript/jQuery?

Question

I picked up some code developed previously by some other developers and they have a file index.html with hardcoded elements. I am supposed to refactor those hardcoded elements with calls to the API but they are not being rendered immediately.

//index.html

<script src="./selectSpecialty.js"></script>
//some code (..)

          <textarea class="picklist_section_1007000061040 hide"> 
                  <div class="control-group ticket_section">
//hardcoded field
                    &lt;label class=&quot; required control-label name_of_the_event_997167-label &quot; for=&quot;helpdesk_ticket_name_of_the_event_997167&quot;&gt;Name of the event&lt;/label&gt;
                    &lt;div class=&quot;controls   &quot;&gt;
                    &lt;input class=&quot; required text section_field span12&quot; id=&quot;helpdesk_ticket_custom_field_name_of_the_event_997167&quot; name=&quot;helpdesk_ticket[custom_field][name_of_the_event_997167]&quot; size=&quot;30&quot; type=&quot;text&quot; /&gt;
                    &lt;/div&gt; 
                  </div>
                    <div class="control-group ticket_section">
//this is where the select should appear
                      <div id = "specialty">
                      </div>
                  </div>
            </textarea>

This is the API call

//specialty.js
jQuery.ajax(
    {
    url: "https://example.net",
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    headers: {
        "Authorization": "Basic " + btoa(api_key + ":x")
    },
    success: function(data, textStatus, jqXHR) {
        var specialtyChoices = data['choices'];
        var response = `<label class=" required control-label specialty_997167-label " for="helpdesk_ticket_specialty_997167">Specialty</label> <div class="controls">
                        <select class=" required dropdown_blank section_field dynamic_sections"
                        id="helpdesk_ticket_custom_field_specialty_997167" name="helpdesk_ticket[custom_field][specialty_997167]">
                        <option value="">...</option>`;
        for(let sc of specialtyChoices){
            response += '<option value="' + sc['value'] + 'data-id="">'
            response += sc['value']
            response += '</option> '
        }
        response += '</select></div>'
        jQuery('#specialty').html(response)
        
    },
    error: function(jqXHR, tranStatus) {
        jQuery('#result').text('Error');
        jQuery('#code').text(jqXHR.status);
        x_request_id = jqXHR.getResponseHeader('X-Request-Id');
        response_text = jqXHR.responseText;
        jQuery('#response').html(" Error Message : <b style='color: red'>"+response_text+"</b>.<br/> Your X-Request-Id is : <b>" + x_request_id 

    }
    }
);

Can someone please explain to me how do I make the API call render immediately just like the hardcode field?

Answer 1

since you have replaced the hard-coded elements for an ajax call, it will have some delay to render the elements. At least you have a small delay because there is a network call happening here and it will impact.

That's why you could put some loading spinner gif to improve the user experience.

There is no way to explain why they did that, but, probably because it wasn't a requirement at the time