Fix API key sign up load problem

[jason-upchurch]

User story

As a user of the api key signup page, I want the page to sign up form to load consistently so that I can sign up for an api key on the first page load.

Background

Both @johnnyporkchops and @jason-upchurch have observed the form not loading on the first try. This doesn't seem to happen often, but we've both seen it. We'd like to try to ensure the form loads with the page every time.

Technical considerations

• Timeboxed to handle by Monday and address with the form consistently loading, or the data.gov form link is included
• Do we need to remove the feature flag?
• Is there really a form load lag?
• If so, can we fix this and make sure the page waits for the form?

Completion criteria:

• The form loads consistently each time

[johnnyporkchops]

@rfultz Do you think if we add defer to to script instead of async this would help? It is a bit hard to reproduce the intermittent error consistently to test. (cc: @patphongs )

var apiUmbrella = document.createElement('script'); 
        apiUmbrella.type = 'text/javascript'; 
        apiUmbrella.async = true;
        apiUmbrella.src = 'https://api.data.gov/static/javascripts/signup_embed.js';
        (document.getElementsByTagName('head')[0] || 
         document.getElementsByTagName('body')[0])
        .appendChild(apiUmbrella);

Also I wonder if feature flag logic is intermittently slowing down page load. The logic wrapping the js could be simplified like this:

<script>
    window.onload = function() {
      SwaggerLayout(
        "{{ specs_url }}",
        document.getElementById("swagger-ui")
      );
 {% if api_key_signup_feature_flag %}     
       var apiUmbrella = document.createElement('script'); 
       apiUmbrella.type = 'text/javascript'; 
       apiUmbrella.async = true;
       apiUmbrella.src = 'https://api.data.gov/static/javascripts/signup_embed.js';
       (document.getElementsByTagName('head')[0] || 
        document.getElementsByTagName('body')[0])
       .appendChild(apiUmbrella);
  {% endif %}
    };
</script>

Also we can remove

          document.getElementsByTagName('body')[0])

[jason-upchurch]

@johnnyporkchops @rfultz thanks for the discussion! Based on the possibility that the feature flag is involved, and the fact that it didn't work as intended, I also opened issue #4545 to remove it.

I also see that it's not always failing to load, so hopefully simplifying the logic will help.

cc @patphongs

[jason-upchurch]

@johnnyporkchops I'm going to start by removing the feature flag.

[jason-upchurch]

@johnnyporkchops I wanted to document your leadership role in this issue. The ideas that I was able to implement here all came from your comments. You also sat with me as we paired on the implementation and spent equal time and were an equal leader in the solution. Thank you!! 👍 cc @patphongs

[johnnyporkchops]

@jason-upchurch. Thanks for keeping this in the pipeline and knocking it out this sprint. Good call!

[JonellaCulmer]

Closing, the work is merged.