search

CarterLi / vue3-ace-editor

Like vue2-ace-editor but more functional and supports Vue 3
MIT License
182 stars 24 forks source link

Fix problems with modals/dialogs by adding delay to Observer #14

Closed jan-demsar closed 2 years ago

jan-demsar commented 2 years ago

I had a quite unique problem.

When loading Ace editor inside of a dialog/modal (like Quasar Framework Dialog), the dialog would be opening for 15 seconds (while blocking everything else).

Then I realized the observer is the root cause of this.

When I added a short delay before starting the observer the problem went away and dialog opens instantly.

jan-demsar commented 2 years ago

Actually no.

The way to solve the problem of dialog opening for 15 seconds in Quasar Framework is to start loading Ace Editor after @show event has been triggered on dialog.

<q-dialog v-model="showDialog"
            @show="showEditor = true"
            @close="showEditor = false"
  >
    <v-ace-editor
        v-if="showEditor"
        v-model:value="localValue"
        lang="html"
        theme="monokai"
        style="height: 300px"
    />
</q-dialog>