Prefetch ckeditor on load

opf · Jul 6, 2023 · 80d886e · 80d886e
1 parent 6867c60
commit 80d886e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-setup.service.ts b/frontend/src/app/shared/components/editor/components/ckeditor/ckeditor-setup.service.ts
@@ -23,9 +23,16 @@ export class CKEditorSetupService {
   /** The language CKEditor was able to load, falls back to 'en' */
   private loadedLocale = 'en';
 
+  /** Prefetch ckeditor when browser is idle */
+  private prefetch:Promise<unknown>;
+
   constructor(private PathHelper:PathHelperService) {
   }
 
+  public initialize() {
+    this.prefetch = this.load();
+  }
+
   /**
    * Create a CKEditor instance of the given type on the wrapper element.
    * Pass a ICKEditorContext object that will be used to decide active plugins.
@@ -42,7 +49,7 @@ export class CKEditorSetupService {
     initialData:string|null = null,
   ):Promise<ICKEditorWatchdog> {
     // Load the bundle and the matching locale, if found.
-    await this.load();
+    await this.prefetch;
 
     const { type } = context;
     const editorClass = type === 'constrained' ? window.OPConstrainedEditor : window.OPClassicEditor;
@@ -108,11 +115,11 @@ export class CKEditorSetupService {
     // untyped module cannot be dynamically imported
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    await import(/* webpackChunkName: "ckeditor" */ 'core-vendor/ckeditor/ckeditor.js');
+    await import(/* webpackPrefetch: true; webpackChunkName: "ckeditor" */ 'core-vendor/ckeditor/ckeditor');
 
     try {
       await import(
-        /* webpackChunkName: "ckeditor-translation" */ `../../../../../../vendor/ckeditor/translations/${I18n.locale}.js`
+        /* webpackPrefetch: true; webpackChunkName: "ckeditor-translation" */ `../../../../../../vendor/ckeditor/translations/${I18n.locale}.js`
       ) as unknown;
       this.loadedLocale = I18n.locale;
     } catch (e:unknown) {

diff --git a/frontend/src/app/shared/components/editor/openproject-editor.module.ts b/frontend/src/app/shared/components/editor/openproject-editor.module.ts
@@ -26,7 +26,11 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { NgModule } from '@angular/core';
+import {
+  APP_INITIALIZER,
+  Injector,
+  NgModule,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { OpenprojectAttachmentsModule } from 'core-app/shared/components/attachments/openproject-attachments.module';
@@ -40,6 +44,13 @@ import { WikiIncludePageMacroModalComponent } from 'core-app/shared/components/m
 import { ChildPagesMacroModalComponent } from 'core-app/shared/components/modals/editor/macro-child-pages-modal/child-pages-macro.modal';
 import { CodeBlockMacroModalComponent } from 'core-app/shared/components/modals/editor/macro-code-block-modal/code-block-macro.modal';
 
+export function initializeServices(injector:Injector) {
+  return () => {
+    const ckeditorService = injector.get(CKEditorSetupService);
+    ckeditorService.initialize();
+  };
+}
+
 @NgModule({
   imports: [
     FormsModule,
@@ -52,6 +63,9 @@ import { CodeBlockMacroModalComponent } from 'core-app/shared/components/modals/
     EditorMacrosService,
     CKEditorSetupService,
     CKEditorPreviewService,
+    {
+      provide: APP_INITIALIZER, useFactory: initializeServices, deps: [Injector], multi: true,
+    },
   ],
   exports: [
     CkeditorAugmentedTextareaComponent,