New pattern: asynchronous styles

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

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. 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

-# the file is located in app/assets/stylesheets/async_bundles/work_items
- add_async_style "work_items"

import { loadAsyncStyle } from '~/helpers/styles';

export const showNewEpicModal = async () => {
  await loadAsyncStyle('work_items');
  showModal();
}