Allow the Widget to be loaded asynchronously

Issue Summary

Allow the Widget to be loaded asynchronously

Steps to Reproduce

• From your service project, go to Project settings > Widget.

• Choose the widget options that fit your needs.

• Select Save to confirm.

• Copy and use the generated code on your web page(s).

Expected Results

It is desired that the Widget can be loaded asynchronously by using the async attribute in the script.

For instance:

<script
async
data-jsd-embedded data-key="DATA_KEY" data-base-url="BASE_URL" src="https://jsd-widget.atlassian.com/assets/embed.js"></script> 

With this customization, the widget does not load because the script is only creating the widget when the DOM has loaded, but as the async attribute allows the script to load in the background, the script will likely finish after the DOM has loaded unless the script was cached.

Updating the script to first check document.readyState == 'interactive' || document.readyState == 'complete' and if neither of those are true then the script can wait for DOM loading to launch the widget, would allow the async tag to work as intended.

This has also been discussed in this community post: https://community.atlassian.com/t5/Jira-Service-Management/Dynamically-Embedding-Service-Desk-Widget/qaq-p/899686 

Actual Results

The script only creates the widget when the DOM has loaded, blocking the page's load.

Workaround

Update your code to dispatch a new  DOMContentLoaded event after the page loading us complete as covered in the same community post.

You may also reach out to our Developer Community who will be able to assist you further on this query.