How to efficiently use multiple CKEditor5 instances on a page?

I have a form with potentially 200+ inputs. It is required to use CKEditor5 for all inputs. However, if I load all 200 CKEditor5's at the same time, the page takes more than 10 seconds to open. The current implementation is as follows.

Template:

<mat-accordion>
    <mat-expansion-panel *ngFor="let question of questionList; let i = index">
        <!-- Other views here -->

        <ckeditor [editor]="editor" [(ngModel)]="question.prompt"></ckeditor>
    </mat-expansion-panel>
</mat-accordion>

Component:

import * as InlineEditor from '@ckeditor/ckeditor5-build-inline';
// Other imports

@Component({
  selector: 'app-questions',
  templateUrl: './questions.component.html',
  styleUrls: ['./questions.component.scss']
})
export class QuestionsComponent {
  @Input() questionList: QuestionModel[];
  editor = InlineEditor;

  // Other code
}

How can I use CKEditor for all inputs without freezing the page or accordion animations? I tried a few things but none of them worked.

This answer proposes a solution but I don't know how to implement it.

Initialize the editor only after clicking on an editable element. Destroy old editor on blur event or clicking on the second editable element and initialize new one on the given text - it would require creating a simple wrapper over the element