From 4804900ac935c5f9d4e47c0b0827be4c232bd0e5 Mon Sep 17 00:00:00 2001
From: Jason Song <i@wolfogre.com>
Date: Thu, 19 Jan 2023 02:19:38 +0800
Subject: [PATCH] Load asciicast css async (#22502)

Load asciicast css asynchronously.

Related to #22448.
---
 web_src/js/markup/asciicast.js     | 5 ++++-
 web_src/less/markup/asciicast.less | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web_src/js/markup/asciicast.js b/web_src/js/markup/asciicast.js
index d77c05b7aa..902cfcb731 100644
--- a/web_src/js/markup/asciicast.js
+++ b/web_src/js/markup/asciicast.js
@@ -2,7 +2,10 @@ export async function renderAsciinemaPlayer() {
   const els = document.querySelectorAll('.asciinema-player-container');
   if (!els.length) return;
 
-  const player = await import(/* webpackChunkName: "asciinema-player" */'asciinema-player');
+  const [player] = await Promise.all([
+    import(/* webpackChunkName: "asciinema-player" */'asciinema-player'),
+    import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'),
+  ]);
 
   for (const el of els) {
     player.create(el.getAttribute('data-asciinema-player-src'), el, {
diff --git a/web_src/less/markup/asciicast.less b/web_src/less/markup/asciicast.less
index 468f0b4f3f..a52b2ae12e 100644
--- a/web_src/less/markup/asciicast.less
+++ b/web_src/less/markup/asciicast.less
@@ -1,5 +1,3 @@
-@import "../asciinema-player/dist/bundle/asciinema-player.css";
-
 .asciinema-player-container {
   width: 100%;
   height: auto;