<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=481499) </details> <!--IssueSummary end--> We need to have a way to load our styles asynchronously. This is needed for cases where the UI is displayed on every page but it's only visible via user interaction. A good example of this is [work items](https://gitlab.com/gitlab-org/gitlab/blob/66aa9213112851208b356e26fe5939088de06e6a/app/views/layouts/_head.html.haml#L9). We have this line in the `head` template, which loads this stylesheet on every page. Since the UI for this feature is not visible 99.999% of the times we don't have to load it upfront. Instead, we should load it only if the user clicks 'New Epic' button in super sidebar. ## Proposed API ```haml -# the file is located in app/assets/stylesheets/async_bundles/work_items - add_async_style "work_items" ``` ```js import { loadAsyncStyle } from '~/helpers/styles'; export const showNewEpicModal = async () => { await loadAsyncStyle('work_items'); showModal(); } ```