From 4cc1656a60e49a7aadd81b637a0d7a366a45feaf Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 26 Jul 2023 17:50:10 +0200 Subject: [PATCH] Slightly defer the initialization but not loading of CKEditor This change improves the perceived performance by forcing the browser to insert a rendering pass before initializing the browser. In particular on mobile devices this creates an opportunity to refresh the screen. --- ts/WoltLabSuite/Core/Component/Ckeditor.ts | 4 ++++ .../install/files/js/WoltLabSuite/Core/Component/Ckeditor.js | 3 +++ 2 files changed, 7 insertions(+) diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts index 3b78670556..54dbf90a61 100644 --- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts +++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts @@ -220,6 +220,10 @@ export async function setupCkeditor( await import("ckeditor5-bundle"); + await new Promise((resolve) => { + window.requestAnimationFrame(resolve); + }); + initializeFeatures(element, features); if (features.attachment) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js index feb28bb662..98de8ccdca 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js @@ -156,6 +156,9 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi throw new TypeError(`Cannot initialize the editor for '${element.id}' twice.`); } await new Promise((resolve_1, reject_1) => { require(["ckeditor5-bundle"], resolve_1, reject_1); }).then(tslib_1.__importStar); + await new Promise((resolve) => { + window.requestAnimationFrame(resolve); + }); initializeFeatures(element, features); if (features.attachment) { (0, Attachment_1.setup)(element); -- 2.20.1