Closing a q-dialog with a lot of content is very very slow

[nulele]

Hello,

I have a q-dialog component with a custom component as content.

    <q-dialog full-height full-width persistent v-model="showEditDialog">
      <q-card class="full-height full-width">
        <q-card-section class="row">
          <div class="text-h6">Edit</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>

        <q-separator />

        <q-card-section style="height:calc(100% - 120px)" class="scroll">
          <CustomComponent ...></CustomComponent>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn label="Save" color="positive" @click="save()" />
        </q-card-actions>
      </q-card>
    </q-dialog>

This custom component is a huge form to create a survey with a lot of questions and every question has many other input fields alongside with answers of course.

The dialog close button has the v-close-popup property. When I close the dialog it takes about 10 seconds before it to disappear.

I guess the problem is the amount of content… what I could try to speed up the closing of the dialog before moving my custom component in a page rather than in a q-dialog?

Thanks

[nulele]

I tried to move the content in a page rather than in a q-dialog but I still have performance problem.

When I click the back button (basically a $router.push() to the list page) it takes several seconds before the page changes.

I can’t understand if my problem is related to Quasar or Vue… maybe they are not suitable for such amount of content?

[beets]

@nulele If possible, please make a code pen of the issue, or share some of the code for CustomComponent. You could maybe try using

          <CustomComponent v-once ...></CustomComponent>

But I’m not sure how that would affect your component without seeing it. There must be some heavy data-reactivity going on, I would suspect.