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;