ngx-monaco-editor taking a while to load the first time

Question

I was able to integrate ngx-monaco-editor with my Angular 8 app. One issue I am having is - When I open the editor with some content for the first time, it takes 3-4 seconds. This is a relatively long time and user might think the application is unresponsive.

I am not sure what is causing the issue. Based on other posts, it might have to do with downloading editor.main.js. Is there a way to trigger ngx-monaco-editor load/setup ahead of time, so by the time the user opens up the content, it instantly loads the editor in the modal window.

Monaco Componet -

Html

<div style="height: 100%">
   <ngx-monaco-editor [options]="Options" [(ngModel)]="Code" ></ngx-monaco-editor>
</div>

TS

import { Component, Input } from '@angular/core';

@Component({
   selector: 'monaco-component',
   templateUrl: './monaco.component.html',
   styleUrls: ['./monaco.component.scss']
})
export class monacoimplements {
   @Input() Code: any;
   private Options = {theme: 'vs', language: 'xml', };
   constructor() { }
}

Answer 1

This example need a NgxLoadingModule

npm install --save ngx-loading

import { NgxLoadingModule } from 'ngx-loading';

Let your-component.html like this

...
  <div style=" position:relative; height:200px;">
    <ngx-monaco-editor style="height:100%;" [options]="editorOptions" (onInit)="onMonacoEditorInit($event)"></ngx-monaco-editor>
    <ngx-loading [show]="loading"></ngx-loading>
  </div>
...

Let your-component.ts like this

...
  editorOptions = { theme: 'vs-dark', language: 'html' };

  constructor(
    private changeDetectorRef: ChangeDetectorRef
  ) {
    
    });

  onMonacoEditorInit(): void {
    this.loading = false;
    this.changeDetectorRef.detectChanges();
  }
...