From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 26 Jul 2023 15:50:10 +0000 (+0200)
Subject: Slightly defer the initialization but not loading of CKEditor
X-Git-Tag: 6.0.0_Alpha_8~49
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4cc1656a60e49a7aadd81b637a0d7a366a45feaf;p=GitHub%2FWoltLab%2FWCF.git

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

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);